学习sass

前听李立超老师说:“HTML、CSS那些说不好听的,不能叫一门编程语言!”当时觉得好笑。不过自从学了Sass之后,才发现确实是这样的。虽然感觉现在一些样式已经可以通过软件自动生成了,不过学一点总是没有坏处,于是就去sass官网简单的学了一下。


  • 安装

    sass是基于Ruby语言开发的,不过学习sass并不需要掌握ruby,不过需要先安装ruby。安装时记得将可执行文件添加到环境变量中。通过在命令行中输入ruby -v来检查是否安装成功。

    安装了ruby后会自带一个gem,一个类似于pip的东西。既然类似于pip,那么它自然也会遇到国内下载速度过慢的问题,所以需要换源:

    //删除替换原gem源
    gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    //打印是否替换成功
    gem sources -l
    https://gems.ruby-china.com
    # 确保只有 gems.ruby-china.com
    

    之后通过gem install sass就可以安装sass了,通过sass -v检查。

  • 编译sass

    sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。这里介绍一下命令行编译:

    sass test.scss  //将在屏幕上显示.scss文件转后厚生成的css代码
    
    sass inpout.scss output.scss  //将input.scss编译并保存为output.scss
    
    sass --watch input.scss:output.css  //单文件监听命令
    
    //如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
    sass --watch app/sass:public/stylesheets
    

    可以通过增加参数--style来指定解析后的css文件是什么排版格式

    sass内置有四种编译格式:nested、expanded、conpact、compressed --sourcemap表示开启sourcemap调试,开启后,会生成一个后缀名为.css.map的文件。

  • 语法

    • 变量

      类似于php,sass的变量名同样以$开头,不过对于变量的赋值则不用=,而是用类似于css属性的声明:$highlight-color: #F90;并且以;结尾。

    • 变量的生命周期

      先看一下代码:

      $nav-color: #F90;
      nav {
        $width: 100px;
        width: $width;
        color: $nav-color;
      }
      

      这里的$nav-color类似于全局变量,可以用在nav这个规则块中,而$width定义在nav这个规则块中,不能被外部所访问到

    • 规则的嵌套

      css中如果要写一大串指向同一块的样式,需要重复多次写同一个ID。而通过sass的嵌套,可以只写一遍,并且提高了代码的可读性。例如:

      //css
      #content article h1 { color: #333 }
      #content article p { margin-bottom: 1.4em }
      #content aside { background-color: #EEE }
      
      //sass
      #content {
        article {
          h1 { color: #333 }
          p { margin-bottom: 1.4em }
        }
        aside { background-color: #EEE }
      }
      

      这样就避免了重复、无意义的代码。

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

      如果要给标签添加:hover之类的伪类,则需要使用到父选择器,例如

      //没用父选择器
      article a {
        color: blue;
        :hover { color: red }
      }
      //这里的:hover是绑定给所有article下的超链接,而并不是单独的一个超链接
      
      //使用父选择器
      article a {
        color: blue;
        &:hover { color: red }
      }
      
    • 子组合选择器和同层组合选择器:>、+和~

      >——子组合选择器,用于选择一个元素的直接子元素,它只会选择紧跟在元素后面的第一个子元素。

      +——同层选择器,用于选择层级相同的元素,它也只会选择同层级的下一个元素。

      ~——同层全体组合选择器,与+的区别在于它会选择同层级下所有的后面的元素。

    • 嵌套属性

      在sass中,除了css选择器,属性也可以进行嵌套,例如

      nav {
        border: {
        style: solid;
        width: 1px;
        color: #ccc;
        }
      }
      

      这里要注意,border后面多出了一个冒号,sass看到这个冒号后就知道这里是嵌套属性,就会在编译时将跟属性和子属性通过中划线-连接起来。

  • 导入外部样式

    • @import:与css不同的是,sass的@import在一开始就会将相关文件导入进来,而不是css的执行到@import时才会去下载导入文件。
    • 使用sass的@import规则可以省略文件的后缀名
    • 有时候,我们只想生成少数的几个css文件,那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的文件我们称之为局部文件。对此,sass约定,sass的局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky";
  • 默认变量值

    类似于css的!important,我们可以在变量赋值语句后加上!default来表明这个变量值是默认变量值,例如:

    $fancybox-width: 400px !default;
    .fancybox {
    width: $fancybox-width;
    }
    
  • 混合器

    混合器类似于vue和react中的组件,使用混合器的目的是为了实现大段样式的重用。

    混合器使用@mixin标识符定义,定义之后可以通过@import来导入,例如:

    @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;
    }
    

    混合器同样可以附带参数,并且参数可以设置默认值,类似于python以及js中的函数。默认值通过$name:default-value的形式声明,例如:

    @mixin link-colors(
        $normal,
        $hover: $normal,
        $visited: $normal
      )
    {
      color: $normal;
      &:hover { color: $hover; }
      &:visited { color: $visited; }
    }
    

    当我们通过@include link-colors(red)来调用时,$hover$visited会被自动赋值为$normal,也就是red。

  • 选择器的继承

    类似于各大编程语言,sass同样可以实现继承,通过@extend来声明,例如:

    //通过选择器继承继承样式
    .error {
      border: 1px solid red;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    

    这里的border-width会被覆盖为3px,border为3px solid red。

    注意,继承不仅会继承自身的样式,还会继承组合选择器。例如:

    //.seriousError从.error继承样式
    .error a{  //应用到.seriousError a
      color: red;
      font-weight: 100;
    }
    h1.error { //应用到hl.seriousError
      font-size: 1.2rem;
    }
    

    如上所示,在class="seriousError"html元素内的超链接也会变成红色和粗体。

    关于@extend有两个要点你应该知道。

    • 跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度,请牢记这一点。
    • 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时,并且这两个不同的css规则对同一属性的修饰存在不同的值,css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。

在后面:

​ sass与scss是不一样的,官网所讲的其实是scss,而sass则是类似于python一样通过严格的缩进来区分层级。具体区别可以自己百度。

加载评论