scss/less语法以及在vue项目中的使用(转载)

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:;
.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)<%{
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 to {
.R#{$i}{
width:$i*20px;
height:$i*20px;
/*注意:变量带单位时不能写成($i)px;应该写:#{$i}px*/
border:#{$i}px solid olive;
}
}

6.scss中的函数:

/*函数使用*/
@function double ($num){
@return $num*
}
.test5{
font-size: double(20px);
color:gold;
}
上一篇:1. @ModelAttribute注解


下一篇:第11月第3天 直播 rtmp yuv