scss/less语法以及在vue项目中的使用

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

scss与less都是css的预处理器，首先我们的明白为什么要用scss与less，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写复杂的样式时必然存在局限性，不灵活，而scss与less正好为css提供这些，让css可以像编程一样灵活书写样式，而且scss与还提供了一些css兼容性的处理，所以运用scss就不需要像写css时队友的语法需要做hack处理。SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
本文我们只对scss介绍，其实less都差不多，当你使用scss语法是要用.scss后缀，使用sass语法时用.sass后缀。
在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的常用语法就到这里了，希望能帮到大家，谢谢！

scss/less语法以及在vue项目中的使用

猜你喜欢