css预处理器

1. scss的应用

Sass是成熟、稳固、弱小的CSS预处理器，而SCSS是2010年5月的Sass3版本当中引入的新语法个性，种语法旨在通过引入CSS敌对语法来缩小Sass和CSS之间的差距。齐全兼容CSS3的同时继承了Sass弱小的动静性能。

  • sass和scss的区别

    • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
    • 语法书写形式不同，Sass 是以严格的缩进式语法规定来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写形式十分相似。
    // sass语法：$font-stack: Helvetica, sans-serif  //定义变量$primary-color: #333 //定义变量body  font: 100% $font-stack  color: $primary-color// scss语法：$font-stack: Helvetica, sans-serif;$primary-color: #333;body {  font: 100% $font-stack;  color: $primary-color;}

  • scss变量

    变量用来存储须要在CSS中复用的信息，例如色彩和字体。SASS通过$符号去申明一个变量。

    $primary-color: #333;body {  color: $primary-color;}

  • scss嵌套:

    nav {  ul {    margin: 0;    padding: 0;    list-style: none;    li {       display: inline-block;      &>a { // 父选择器的标识符&        color: red      }    }  }}

  • @import引入

    // _reset.scsshtml, body, ul, ol {  margin:  0;  padding: 0;}// base.scss@import 'reset';body {  font: 100% Helvetica, sans-serif;  background-color: #efefef;}

    在scss中引入scss文件时能够省略文件扩展名

  • 函数：

    • sass自带函数max, min, ceil, floor, 查看所有自带函数列表

    • 自定义函数：

      @function addWidth($width1,$width2){  @return $width1+$width2;}div{  width:addWidth(100px,20px);}

  • Mixin混入

    混合（Mixin）用来分组那些须要在页面中复用的CSS申明，开发人员能够通过向Mixin传递变量参数来让代码更加灵便，该个性在增加浏览器兼容性前缀的时候十分有用，SASS目前应用@mixin name指令来进行混合操作。

    @mixin rounded-corners {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}.notice {  background-color: green;  border: 2px solid #00aa00;  @include rounded-corners;}

    能够通过在引入混合器时给混合器传参，来定制混合器生成的准确款式。这样形式跟JavaScript的Function很像：

    @mixin link-colors ($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover ;}  &:visited { color: $visited; }}a {  @include link-colors(blue, red, green)}

  • @extend继承

    .error {  border: 1px solid red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}

  • deep深度作用选择器

    <style lang="scss" scoped>  .button-box{    /deep/ .el-button{      padding: 13px 50px;    }  }</style>

  • 根底运算:

    // 加：+.div1{  width: 10px+10px;}.div2{  width: 10px+10;}// 减：-.div1{  width: 10px-5px;}.div2{  width: 10px-5;}// 乘： *.div1{  width: 10px*px; //报错}.div2 {  width: 20px; }除：/.div1{  //不正确  width: 10px/2;}.div2{  //不正确  width: 10px/2px;}.div3{  //不正确  width: (10px/2px);}.div4{//正确  width: (10px/2);}

  • 插值语句

    $height:10px;$name:height;.div-#{$name}{  #{$name}: #{$height};}

  • @if、@for、@each、@while

    $type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}
    @mixin does-parent-exist {  @if & {    &:hover {      color: red;    }  } @else {    a {      color: red;    }  }}// 如果没有父选择器，&的值将是空，你能够在一个mixin中应用它来检测父抉择是否存在
    @for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}// 等于.item-1 {  width: 2em;}.item-2 {  width: 4em;}.item-3 {  width: 6em;}

2. less的应用

less是一门css预处理它裁减了 CSS 语言，减少了诸如变量、混合（mixin）、函数等性能，让 CSS 更易保护、不便制作主题、裁减。Less 能够运行在 Node 或浏览器端。

  • 嵌套：

    .container {

    h1 {  font-size: 25px;  color:#E45456;}p {    font-size: 25px;    color:#3C7949;}.myclass {  h1 {    font-size: 25px;    color:#E45456;  }  p {    font-size: 25px;    color:#3C7949;  }}

    }

  • 变量：

    // 在less中应用@XXX定义变量@width: 10px;@height: @width + 10px;#header {  width: @width;  height: @height;}@b: box@rem: 64px;#{@b}1 {  width: @width*2;  height: @width*@rem;  background: red;}// 写在{}之间 叫做局部变量，只能够在{}之间起作用.box {  @width: 200px;   width: @width;}

  • 混入

    // 不带参数，无默认值.div1 {  width:200px;  height:200px;  backgorund-color;red;}.div2 {  border:1px solid red;  .div1}
    // 带参数，无默认值.div1(@w) {  border:solid red @w;}.div2 {  widthz;200px;  height:200px;  .div2(30px);}
    // 带参数带默认值.div1(@w:3px) {  norder:solid red @w'}.div2 {  widthz;200px;  height:200px;  .div2(); //不传参（然而得有小括号），默认就是3px，传参就是新值}// 混入中减少判断条件.width(@weight) when (@weight > 200px){  width：@weight;}#box2 { // 无成果    .width(200px);}#box3 {    .width(300px);}