(文章是 博主根据自己所学以及经验创作,如存在错误之处欢迎提出指正,不喜勿喷!)

  1. scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与less正好为css提供这些,让css可以像编程一样灵活书写样式,而且scss与还提供了一些css兼容性的处理,所以运用scss就不需要像写css时队友的语法需要做hack处理。SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
  2. 本文我们只对scss介绍,其实less都差不多,当你使用scss语法是要用.scss后缀,使用sass语法时用.sass后缀。
  3. 在vue项目中的使用:
  • 安装:在命令行中输入:npm install node-sass sass-loader --save-dev
  • 在样式中声明使用scss:<style lang=scss scoped><style>(到这里就可以愉快的使用scss语法了)
  • 注:在webpack.config.js中不需要配置使用sass-loader,因为vue-loader会自动解析

4. scss常用语法简介:

1.自定义变量以及子元素书写:

<style lang=scss scoped>
/*scss的使用:*/
/*1.自定义变量*/
$color:pink; 
$width:200px;
$height:200px;
$right:right;
$num:2;
.test{
	background:$color;
	width:$width;
	height:$height;
	margin:30px auto;
	/*插入变量*/
	border-#{$right}:2px solid blue;
	/*子元素的书写*/
	p{
		color:orange;
		font-size: 30px;
	}
}

2.样式的加减乘除以及继承样式:

.p{
	background:yellowgreen;
}
.test2{
	/*样式的加减乘除,自定义变量再使用*/
	width:$num*100px;
	height:$num*50px;
	border:(1px+1px) solid orange;
	/*样式的继承*/
	@extend .p;
}

3.样式的复用:

/*代码的复用,相当于自定义一个函数,并且可以 传参*/
@mixin box($height){
	height:$height;
	width:200px;
	border:1px solid deeppink;
}
.test3{
	/*调用*/
	@include box(200px);
}

4.使用if语句:

/*使用if语句判断使用哪套样式,lightness是scss中的一个函数,用来判断色彩度,$color为传入的自定义参数*/
.test4{
	@if lightness($color)<30%{
		width:50px;
		height:50px;
		background:cyan;
	}@else{
		width:50px;
		height:50px;
		background:yellow;
	}
}

5.scss的三种循环:for   while   each:

/*循环语法,包括最常见的三种循环方法,for,while,each,*/
/*其中循环包含开始不包含结束量,如下不包含5*/
@for $i from 1 to 5{
	.R#{$i}{
		width:$i*20px;
		height:$i*20px;
		/*注意:变量带单位时不能写成($i)px;应该写:#{$i}px*/
		border:#{$i}px solid olive;
	}
}

6.scss中的函数:

/*函数使用*/
@function double ($num){
	@return $num*2
}
.test5{
	font-size: double(20px);
	color:gold;
}

结语:scss的常用语法就到这里了,希望能帮到大家,谢谢!

Logo

前往低代码交流专区

更多推荐