css预处理器

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.scss
    html, 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深度作用选择器

  • 基础运算:

    // 加:+
    .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);
    }

你可能感兴趣的