zoukankan      html  css  js  c++  java
  • sass入门

      以前一直听别人讲css的预编译语言,自己也没有具体的看过语法,后来因为公司人都慢慢用,我也准备学起来了,看了文档,其实也挺简单的,变量,混合器,继承。怕忘掉,所以在这做个笔记,便于自己以后的使用。(贴点官网的例子,这样一目了然)

        1,变量声明

      sass变量的声明和css属性的声明很像:

      $highlight-color: #F90;

    使用
    $nav-color: #F90;
    nav {
      $ 100px;
       $width;
      color: $nav-color;
    }
    
    //编译后
    
    nav {
       100px;
      color: #F90;
    }

    其实看着还是挺简单的。
    注意点:变量名用中划线还是下划线都是无所谓的,sass都识别


    2,嵌套
    这样可以省略很多选择器的,比较省代码
    2-1:父选择器的标识符是&
    2-2:群组选择器的嵌套可以用逗号隔开
    2-3:子组合选择器>(
    article section { margin: 5px }
    article > section { border: 1px solid #ccc }
    上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

    2-4:同层组合选择器:+(
    header + p { font-size: 1.1em }
    你可以用同层相邻组合选择器+选择header元素后紧跟的p元素

    2-5:同层选择器~(
    article ~ article { border-top: 1px dashed #ccc }
    选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

    2-6:嵌套属性(把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样:


    3.导入sass文件
    用@import
    4.混合器
    定义
    @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;
    }

    生成
    .notice {
      background-color: green;
      border: 2px solid #00aa00;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    给混合器传参也是很好用的一个方法,比较像js的函数
    @mixin link-colors($normal, $hover, $visited) {
      color: $normal;
      &:hover { color: $hover; }
      &:visited { color: $visited; }
    }

    a {
      @include link-colors(blue, red, green);
    }
    
    //Sass最终生成的是:
    
    a { color: blue; }
    a:hover { color: red; }
    a:visited { color: green; }
    6.继承
    感觉这个有点难我都没看透,感觉工作中都不敢乱用。
     
     

      

  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/susanws/p/7291617.html
Copyright © 2011-2022 走看看