avatar

目錄
SASS语法基础篇

SASS基础语法学习

一. 引言

本文仅仅记录自己的学习历程,作为自己日后翻阅复习之用,并无什么高深的见解,只为温故而知新…

二. 官方网站网: SASS中文网

1. 安装

Sass有以下几种安装方式:

  • 使用独立的安装包(各平台,需要手动添加环境变量) 链接…
  • 使用NPM安装(各平台)
  • 使用Chocolatey包管理工具安装(Windows)
  • 使用Brew安装(macOS)
  • Windows下需先安装Ruby
    注意:安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量

  • 测试安装有没有成功

    css
    1
    2
    3
    ruby -v
    //如安装成功会打印
    ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
  • 更换gem源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //1.删除原gem源
    gem sources --remove https://rubygems.org/

    //2.添加国内淘宝源
    gem sources -a https://ruby.taobao.org/

    //3.打印是否替换成功
    gem sources -l

    //4.更换成功后打印如下
    *** CURRENT SOURCES ***
    https://ruby.taobao.org/
  • 安装Sass和Compass
    使用Ruby自带的RubyGems系统

    css
    1
    2
    3
    //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
    gem install sass
    gem install compass
  • sass常用更新、查看版本、sass命令帮助等命令:

    css
    1
    2
    3
    4
    5
    6
    7
    8
    //更新sass
    gem update sass

    //查看sass版本
    sass -v

    //查看sass帮助
    sass -h
  • 编译sass

    • 命令行编译
    1
    2
    3
    4
    5
    6
    7
    8
    //单文件转换命令
    sass input.scss output.css

    //单文件监听命令
    sass --watch input.scss:output.css

    //如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
    sass --watch app/sass:public/stylesheets
    • 软件方式编译
      推荐koala& codekit

2. SASS与SCSS

  • .SASS
    它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,很多人认为这样做比 SCSS 更容易阅读,书写也更快速。缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式。这种格式以 .scss 作为拓展名。

    css
    1
    2
    3
    h1
    color: #f00
    background:#fff;
  • .SCSS
    仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

    css
    1
    2
    3
    h1{
    color:#f00;
    background:#fff;

三. 变量的使用

1. 变量申明 $

  • 写法:$highlight-color:#fff;
  • 全局变量变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量);不在嵌套规则内定义的变量则可在任何地方使用(全局变量)
  • 将局部变量转换为全局变量可以添加 !global

2. 变量的引用

凡是css属性的标准值可存在的地方,变量就可以使用

3. 变量名

sass的变量名可以与css中的属性名和选择器名称相同,包括中划线、下划线

中划线和下划线两种方式是相互兼容的;用中划线声明的变量可以使用下划线的方式引用,反之亦然

四. 嵌套规则

1. 父选择器标识符 —- &

  • 为父级元素添加 :hover等伪类时使用

  • &还有另一种用法,可以在父选择器之前添加选择器

    例如:在ie浏览器下才显示的样式

css
1
2
3
4
5
6
7
#content aside {
color: red;
body.ie & { color: green }
}
//编译后
#content aside {color: red};
body.ie #content aside { color: green }

2. 群组选择器的嵌套

  • 群组选择器规则内嵌的规则
css
1
2
3
4
5
.container {
h1, h2, h3 {margin-bottom: .8em}
}
//编译为
.container h1, .container h2, .container h3 { margin-bottom: .8em }
  • 内嵌在群组选择器的嵌套规则
css
1
2
3
4
5
nav, aside {
a {color: blue}
}
//编译为
nav a, aside a {color: blue}

3. >、+和~

  • 可以把他们放在外层选择器后边或者里层选择器的前边:
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//编译为
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

4. 属性嵌套

  • 在sass中属性也是可以嵌套的
  • 嵌套属性的规则:

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

五. 导入SASS文件

随着你的样式表变得越来越大,这种写法也很难保持结构清晰。有时,处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有@import规则的改进直接支持了这一特性。

1. 利用@import规则

所有在被导入文件中定义的变量和混合器均可以在导入文件中使用
导入文件时,可不用指明文件的全名,可省略文件后缀

2. 使用SASS部分文件

  • 局部文件

    那些专门为import命令而写的sass文件,并不需要生成对应的独立css文件,这样的sass文件成为局部文件

  • 对于局部文件,有一些约定:

    1. 文件名以下划线开头:这样sass就不会在编译时单独编译这个文件输出css,而只是把这个文件用作导入
    2. 导入局部文件时,还可以不写文件按的全名,即省略文件名开头的下划线
    3. 可以被多个不同的文件引用

3. 默认变量值

  • 反复申明同一个变量,最后一处申明会覆盖之前的值
  • 利用 !default 标签,其含义是:如果这个变量被申明赋值了,那就用它申明的值,否则就用这个默认值

4. 嵌套导入

  • sass允许@import命令写在css规则内
  • 被导入的局部文件中定义的所有变量和混合器,也会在这个规则范围内生效;这些变量和混合器不会全局有效。

5. 原生的CSS导入

  • 不能用sass的@import直接导入以个原始的css文件,sass会误认为你是想用css原生的@import
  • 因为sass语法完全兼容css,所以可以把原始的css’文件改名为.scss后缀

6. 静默注释

  • 以//开头,注释内容直到行末
  • 这种注释不会出现在生成的长css文件中

7. 混合器

当你的样式变得越来越复杂时,需要大段重用样式的代码的时候,独立变量就没法应付了;而通过混合器可以简单解决这一问题

  • 避免滥用混合器
  • 混合器中的CSS规则
    可以在混合器中使用嵌套规则;也可以使用&符
  • 给混合器传参
  • 默认参数值
    通过$name:default-value的生命形式;默认值可以是
    写法与JS的function很像:
css
1
2
3
4
5
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
css
1
2
3
4
5
6
7
8
9
a {
@include link-colors(blue, red, green);
}

//Sass最终生成的是:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

可通过语法$name:value的形式来指定每个参数的值,这样就不用考虑参数的顺序了

8. 使用选择器继承(@extend)来精简CSS

  • 减少重复的特性

    • 基于面向对象的css的理念,利用继承器可以继承为另一个选择器定义的所有样式
    • 通过@extend语法实现**
  • 何时使用继承

    混合器主要是用于展示性样式的重用,而类名是用于语义化样式的重用,所以继承应该是建立在语义化的关系上。
    一般在一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式时,可选用@extend的方式来继承样式

  • 继承的高级用法

    任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承

六. 待续…

文章作者: Dylan
文章鏈接: https://www.faithlch.com/SASS%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%B8%80.html
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Dylan He
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論