美文网首页
Sass上篇

Sass上篇

作者: 懂会悟 | 来源:发表于2020-09-12 11:32 被阅读0次

    1、Sass简单介绍

    Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为 它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
    现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名scss,在Sass3之后的版本都支持这种语法规则。本文主要介绍scss


    2、变量声明

    • sass用$定义变量,变量可以定义在css规则之外也可以定在css规则之内,就像js中的全局变量与局部变量
    • sass变量名称可以用中划线也可以用下滑线,中划线定义的变量可以用下滑线来引用,反之亦然
    $basic-border: 1px solid black;
    $plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica; 
    $nav-color: #F90;
    nav {
      $width: 100px;
      width: $width;
      color: $nav-color;
    }
    
      /* 编译后 */
    
    nav {
      width: 100px;
      color: #F90;
    }
    
    $highlight-color: #F90;
    $highlight-border: 1px solid $highlight-color;
    .selected {
      border: $highlight-border;
    }
    
      /* 编译后 */
    
    .selected {
      border: 1px solid #F90;
    }
    

    3、嵌套CSS 规则

    Sass的嵌套规则与css的嵌套规则很相似

    后代选择器
    #content {
      article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
      }
      aside { background-color: #EEE }
    }
     /* 编译后 */
    #content article h1 { color: #333 }
    #content article p { margin-bottom: 1.4em }
    #content aside { background-color: #EEE }
    
    #content {
      background-color: #f5f5f5;
      aside { background-color: #eee }
    }
     /* 编译后 */
     #content { background-color: #f5f5f5 }
     #content aside { background-color: #eee }
    

    父选择器的标识符&
    • &:父选择器

    当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换

    article a {
      color: blue;
      &:hover { color: red }
    }
     /* 编译后 */
     article a { color: blue } /*后代选择器*/
     article a:hover { color: red } /*父选择器*/
    
    .container {
        h1, h2, h3 {margin-bottom: .8em}/*群组选择器*/
    }
     /* 编译后 */
     .container h1, .container h2, .container h3 { margin-bottom: .8em }
    
    nav, aside {
      a {color: blue}/*群组选择器+后代选择器*/
    }
    /* 编译后 */
    nav a, aside a {color: blue}
    
    
    • '>':表示直接子类
    • '+':只会选择第一个相邻的匹配元素
    • '~':匹配所有在元素之后的同级元素

    4、导入sass文件

    css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

    sass也有一个@import规则,但不同的是,sass的@import规则是在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

    Sass导入规则

    当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此,sass有一个特殊的约定来命名这些文件,

    此约定即,sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky";


    相关文章

      网友评论

          本文标题:Sass上篇

          本文链接:https://www.haomeiwen.com/subject/wuhosktx.html