从零开始学sass
博客专区 > 筱飞 的博客 > 博客详情
从零开始学sass
筱飞 发表于3个月前
从零开始学sass
  • 发表于 3个月前
  • 阅读 20
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

前言

本文所有的演示都是基于Win10操作系统。

关于Sass

1.定义

Sass的学名叫“CSS预处理器”,就是在CSS的基础上,引入了变量、嵌套、mixin(混合)、运算以及函数等功能,增加了代码的灵活性,可以让我们以更少的代码实现同样的效果,而且代码的整洁度、可读性更强。
而且Sass算是CSS的超集,它100%兼容CSS的语法,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是:如果你喜欢,可以在Sass文件中完全以CSS的语法来写代码,它也是完全支持的。
大体来说,使用Sass分3步:

  1. 安装Sass;
  2. 编译Sass文件成CSS文件;
  3. 在项目中引用CSS文件的路径;

2.文件格式

Sass有两种后缀名文件:.sass.scss。在同一个项目中,两种格式文件可以共存(不建议,最好统一为一种格式),但二者有各自的特点:
.sass后缀的文件
使用类Ruby的语法,格式为空格缩进式,没有花括号,靠换行区分不同属性,格式要求比较严格。
.scss后缀的文件
是Sass3引入的新语法,基本写法与CSS大致相同,所以对于专门做前端的同学来说,.scss后缀的文件是不二选择。

有一点需要注意,虽然是CSS的超级,但如果你直接把CSS文件的后缀改为.scss,浏览器是不能识别的。这也就是“预编译”的意思,Sass文件还是需要先编译为CSS文件才能正常被浏览器识别。

安装

Sass基于Ruby编写,所以安装Sass分2步:先安装Ruby的环境,再安装Sass。

1.安装Ruby环境

在[Ruby官网]选择电脑系统对应的版本下载、安装,建议默认路径即可。安装过程中注意勾选第二项:Add Ruby executablesto your PATH。安装完毕在命令行环境中通过ruby -v查看是否成功。

小知识,我这边安装后在ruby的命令行里看到了版本号,在环境变量里也看到/bin地址。可是ruby -v还是执行不成功。

解决方法:命令行中输入path,显示当前计算机path。把这段path复制下来。在末尾加上;C:\Ruby24-x64\bin即可。   切记不要不要把原来的path地址给清空了

2.安装Sass

由于我们可爱的国家有强大的GFW,导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败,所以这里介绍两种windows中Sass的安装方法:官方安装(可能不稳定)及通过镜像安装。

  1. 官方安装
    Ruby安装成功之后,它自带的包管理工具gem也就安装好了。直接打开命令行通过gem执行Sass安装命令,再查看是否安装成功:

     gem install sass
     sass -v        #查看是否安装成功
  2. 通过镜像安装
    比官方安装方法多2步:需要先移除默认的源,再添加Ruby China的源,查看安装成功之后,最后再执行官方的安装方法。

     gem sources --remove     #移除自带源
     gem sources -a https://gems.ruby-china.org/     #安装RubyChina的源
     gem sources -l         #查看当前的源
     gem install sass
     sass -v

    安装源的过程中,如果提示SSL错误,那就把源地址换一下成 tp://gems.ruby-china.org/ 再试。

gem常见命令

  1. gem update --system
    升级RubyGems到最新版本。安装镜像前建议先执行此操作。
  2. gem update sass
    更新Sass版本
  3. gem uninstall sass
    卸载Sass

Sass装好之后,就是万事俱备只欠东风了。因为前面说过,Sass文件先编译为CSS文件才能正常使用,下面来看看有哪些编译的方法。

编译

1.编译方法

Sass编译方式大概有三种:通过命令行编译(基础方法)、GUI可视化图形同居编译及自动化编译。

  1. 命令行编译
    就是在命令行中通过Sass的命令置及编译,后面的演示也是基于这种方法。相对其他方法稍微繁琐一丢丢,但还是建议大家从基础方法入手,后面再升级其他方法,毕竟打牢基础之后才可以理直气壮得“偷懒”嘛:smirk:
    下面是一些基本编译命令

    • 单文件转换命令:

        sass style.scss style.css
        #把名为style的Sass文件转换为CSS文件。
        #件每次有更新保存之后,都需要执行这个命令。
    • 单文件监听命令(添加--watch命令):

        sass --watch style.scss:style.css
        #`--watch`参数加上之后,可以监测style这个文件的变化,更新保存之后自动编译。
    • 多文件(文件夹)监听命令

        sass --watch sass/main:dist/css
        #监视sass目录下main文件夹中的所有Sass文件,并自动编译为CSS文件之后,放到dist/css目录下。
    • 逆向操作,css文件转换为sass/scss文件

        sass-convert style.css style.sass
        sass-convert style.css style.scss
  2. GUI编译工具
    推荐国人自己开发的Koala工具,有中文版,上手也很简单。
    戳这里看教程

  3. 自动化编译
    这里有很多途径实现。可以通过webstorm、Sublime等编辑器的相关插件实现,也可以借助Gulp等自动化构建工具来配置。这里就推荐两款sublime的插件:Sass(Sass语法高亮)和Sass Build(编译)。
    插件的使用也很简单,编辑完文件后默认快捷键Ctrl+B即可编译,会在当前目录下生成同名css及css.map文件。

Sass其他命令

  1. sass- h
    运行命令行帮助文档,可以获得所有的配置选项
  2. sass --style
    指定编译后的css代码格式,后面可跟4种参数:nested,expanded,compact,compressed
  3. sass --sourcemap
    表示开启sourcemap调试。开启之后,会生成一个后缀名为.css.map的文件。不过现在基本都会默认生成此文件。

2.编译结果

像上面提到的,通过给命令--style后面添加不同的参数,会生成不同样式的css代码,这其实没有太多好说,但大家有没有想过一个问题,Sass文件中的注释会被编译到CSS文件中么?这就要看--style命令后面是什么参数了,默认是nested(嵌套式),而expanded(展开式)是CSS代码常见的格式。
下面做简单展示,建议大家亲自下手查看。

Markdown

Sass中的注释有3种:

  1. //我是单行注释
    不会出现在编译之后任何格式的CSS文件中。
  2. /*我是多行注释*/
    只会出现在编译之后代码格式为expanded的CSS文件中。
  3. /*!我是强制注释*/
    会出现在任何代码格式的CSS文件中。

常用基本语法

1.变量

变量是Sass中最基本的语法。凡是css属性的标准值(比如说1px或者bold)可存在的地方,都可以替换为变量。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义,通过变量名称实现多处重复引用。

$box-color: red;        //定义变量
ul{
    color: $box-color;      //引用
}
li{
    background-color: $box-color;          //引用
}

//编译后
ul {
  color: red;
}
li {
  background-color: red;
}

另外,变量的值也可以引用其他变量:

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

.selected {
  border: $highlight-border;
}

//编译后
.selected {
  border: 1px solid #F90;
}

2.嵌套

Sass支持选择器及属性嵌套,可以避免代码的重复书写。

2.1选择器嵌套

div {
    h1 {
        color: #333;
    }
    p {
        margin-bottom: 1.4px;
        a {
            color: #999;
        }
    }
}

 /* 编译后 */
div h1 { color: #333; }
div p { margin-bottom: 1.4px; }
div p a { color: #999; }

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于:hover的伪类,就需要用到 & 这个连接父选择器的标识符。

div {
    p {
        margin-bottom: 1.4px;
        &:hover {
            color: #999;
        }
    }
}

//编译后:
div p { margin-bottom: 1.4px; }
div p:hover { color: #999; }

2.2属性嵌套

示例1:

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

//编译后
div {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

示例2:

div {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

//编译后
div {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3.代码重用之继承

sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。
使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。

.class1 {
    border: 1px solid #333;
}

.class2 {
    @extend .class1;
    background-color: #999;
}

//编译后
.class1, .class2 {
  border: 1px solid #333;
}

.class2 {
  background-color: #999;
}

如上示例,.class2不仅会继承.class1自身的所有样式,也会继承任何跟.class1有关的组合选择器样式,如下:

.class1 {
    border: 1px solid #333;
}
.class1 a {
    color: red;
}

.class2 {
    @extend .class1;
}

//编译后:
.class1, .class2 {
  border: 1px solid #333;
}

.class1 a, .class2 a {
  color: red;
}

4.代码重用之Mixin混合器

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。

  • 无参数mixin声明及调用:

      @mixin mixName {        
          float: left;
          margin-left: 10px;
      }
    
      div {
          @include mixName;
      }
    
      //编译后:
      div {
        float: left;
        margin-left: 10px;
      }
  • 带参数mixin声明及调用
    可以不给参数值直接写参数,如果给了值的话,就是参数的默认值,在调用的时候传入其他值就会把默认值覆盖掉。

      @mixin left($value: 10px) {
          float: left;
          margin-left: $value;
      }
      div {
          @include left(66px);
      }
    
      //编译后:
      div {
        float: left;
        margin-left: 66px;
      }
  • 带多组数值参数的mixin声明及调用
    如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。

      @mixin mixName($shadow...) {
        box-shadow:$shadow;
      }
      .box{
        @include mixName(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
      }
    
      //编译后:
      .box {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
      }

    下面是一个实际应用中关于CSS3浏览器兼容的mixin使用示例:

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity = $opacity * 100);
}

div {
    width: 100px; height: 100px;
    @include transition(all 0.5s);
    @include opacity(0.5);
}
ul {
    width: 50px; height: 50px;
    @include transition(all 1s);
    @include opacity(1);    
}

//编译后
div {
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

ul {
  width: 50px;
  height: 50px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  filter: alpha(opacity=100);
}

5.颜色函数

Sass中集成了大量的颜色函数,让变换颜色更加简单直接。

$box-color: red;        
ul {
    color: $box-color;      
}
li {
    background-color: darken($box-color,30%);       
}

//编译后:
ul {
  color: red;
}
li {
  background-color: #660000;
}

其他颜色函数

  • lighten(#cc3, 10%) // #d6d65c
  • grayscale(#cc3) // #808080
  • complement(#cc3) // #33c

6.@import引入

CSS中原本就有不常用的@import语法,但是有两个弊端:

  1. 引入语句一定要卸载代码最前面才会生效;
  2. 影响性能。如果A文件要引入B文件,当浏览器读到A文件时会再去下载B,阻塞进程。

而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来,也就是所有相关的样式会被编译到同一个CSS文件中,无需发起额外的请求。
当然,Sass的@import也支持导入远程的CSS文件。那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。
一般来说基础的文件命名需要以'_' 开头,如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀,可写成@import "partial"。但是倒入CSS文件的话,就需要“文件名+后缀”了。

@import ‘partial’         //导入名为“_partial.scss”的文件
@import ‘toolbar.css’         //导入名为“toolbar.css”的文件
* {
    margin: 0;
    padding: 0;
}

原生的CSS导入

下列三种情况下会生成原生的CSS@import:

  1. 被导入文件的名字以.css结尾;
  2. 被导入文件的名字是一个URL地址(例如http://www.sass.hk/css/css.css ),由此可用谷歌字体API提供的相应服务;
  3. 被导入文件的名字是CSS的url()值。

也就是说,你不能用Sass的@import直接导入一个原始的CSS文件,因为sass会认为你想用CSS原生的@import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为.scss后缀,即可直接导入了。

结语

文章整理于自己的学习笔记,多为个人理解,仅供参考;如有真知灼见,欢迎交流。



作者:搞点儿事情
链接:http://www.jianshu.com/p/bd1a152f3ca1
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签: sass 样式预编译
共有 人打赏支持
粉丝 13
博文 99
码字总数 20445
×
筱飞
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: