文档章节

从零开始学sass

筱飞
 筱飞
发布于 2017/09/04 18:00
字数 3221
阅读 28
收藏 0
点赞 0
评论 0

前言

本文所有的演示都是基于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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文转载自:http://www.jianshu.com/p/bd1a152f3ca1

共有 人打赏支持
筱飞
粉丝 14
博文 133
码字总数 22342
作品 0
虹口
前端工程师
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着s...

Stinson_Zhao
2016/11/29
377
0
SASS环境搭建及HBuilder中sass预编译配置

---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https://www.zhihu.com/question/33811497   1.先下载一个ruby的安装文......

鋒o丫头
2017/07/07
0
0
Sass学习总结

Sass作为CSS的一种延伸,我知道之后内心一直十分喜悦。 Sass可以做运算,可以配置,可以嵌套,非常灵活。 写在前面! compass是基于SASS二次开发的工具。 1、SASS最后是生成CSS!!! 2、SAS...

Asktao
2016/02/01
43
0
前端开发之路-coffeescript环境搭建

coffeescript的地址:http://coffee-script.org/ nodejs的安装,我们在前面一篇博客已经介绍到,地址:http://my.oschina.net/u/2352644/blog/487488 1.安装(无环境,不编程) 我们看到介绍...

透笔度
2015/08/29
163
0
打包工具 Parcel 1.9.4 发布,升级 Typescript 至 2.9

Parcel 1.9.4 已发布,Parcel 是一款极速、零配置的 Web 应用打包工具。它无需安装插件,开箱即用,使用 worker 进程启用多核编译,同时有文件系统缓存,即使在重启构建后也能快速再编译。 ...

局长
07/02
0
0
在知乎看到这篇文章,现在看来做前端开发真的是很累

CSS不能编程?用Less、Sass、Stylus、甚至直接用 Absurd,框架除了Bootstrap还有很多。JS写多了很麻烦?jQuery。移动开发?Zepto.js。结构不好?找框架,Backbone.js是MVC,AngularJS和Ember...

furw
2015/08/12
0
0
Grunt学习笔记(从零配置grunt)

首先说明下,这个是学习过程中所写的笔记,主要也是给自己看的,没有整理出来,如果大家有需要的可以私信或者留言,我再整理下 先还是使用yeoman来生成一个项目 Modernize:检测用户浏览器是...

邪气小生
2016/03/10
152
0
从零开始学React(3)——数组

前一章是从零开始学React(2)——React语法 http://my.oschina.net/u/2608629/blog/675744 在JXS中,我们可以把要显示的内容放入一个数组。然后,打印出来。即使数组中放的元素有嵌套关系也没...

筱飞
2016/05/16
297
0
sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它

Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性——脚本特性。Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,S...

Stinson_Zhao
2016/12/06
147
0
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处...

Stinson_Zhao
2016/12/02
157
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

pbgo: 基于Protobuf的迷你RPC/REST框架

https://www.oschina.net/p/pbgo

chai2010
39分钟前
0
0
rsync工具介绍、常用选项以及通过ssh同步

linux下的文件同步工具 rsync rsync是非常实用的一个同步工具,可以从a机器到b机器传输一个文件,也可以备份数据,系统默认没有这个工具,要使用命令 yum install -y rsync 安装。 rsync的命...

黄昏残影
54分钟前
0
0
OSChina 周四乱弹 —— 表妹要嫁人 舅妈叮嘱……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @哈哈哈哈哈嗝:一定要听——The Pancakes的单曲《咁咁咁》 《咁咁咁》- The Pancakes 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :...

小小编辑
今天
311
4
流利阅读笔记30-20180719待学习

重磅:让人类得老年痴呆的竟是它? Lala 2018-07-19 1.今日导读 去年奥斯卡最佳动画长片《寻梦环游记》里有一句经典台词:“比死亡更可怕的,是遗忘”。在电影中,年迈的曾祖母会重复说一样的...

aibinxiao
今天
3
0
1.16 Linux机器相互登录

Linux机器之间以密码方式互相登录 运行命令#ssh [ip address],标准命令:#ssh [username]@ip, 如果没有写用户名,则默认为系统当前登录的用户 命令#w查看系统负载,可查看到连接到该主机的...

小丑鱼00
今天
0
0
about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
3
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部