赵江龙

Hi Girl

  • 主页
  • 教程
所有文章 友链 关于我

赵江龙

Hi Girl

  • 主页
  • 教程

SASS简介

2018-12-08

教程原文

关于Sass

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

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

2.文件格式
Sass有两种后缀名文件:.sass和.scss。在同一个项目中,两种格式文件可以共存(不建议,最好统一为一种格式),但二者有各自的特点:

.sass后缀的文件
使用类Ruby的语法,格式为空格缩进式,没有花括号,靠换行区分不同属性,格式要求比较严格。

.scss后缀的文件
是Sass3引入的新语法,基本写法与CSS大致相同,所以对于专门做前端的同学来说,.scss后缀的文件是不二选择。

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

Markdown

Sass中的注释有3种:

1
2
3
4
5
6
7
8
//我是单行注释
不会出现在编译之后任何格式的CSS文件中。

/*我是多行注释*/
只会出现在编译之后代码格式为expanded的CSS文件中。

/*!我是强制注释*/
会出现在任何代码格式的CSS文件中。

常用基本语法

1.变量
变量是Sass中最基本的语法。凡是css属性的标准值(比如说1px或者bold)可存在的地方,都可以替换为变量。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
通过 $ 符号来定义,通过变量名称实现多处重复引用。
$box-color: red; //定义变量
ul{
color: $box-color; //引用
}
li{
background-color: $box-color; //引用
}

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

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

1
2
3
4
5
6
7
8
9
10
11
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

.selected {
border: $highlight-border;
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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的伪类,就需要用到 & 这个连接父选择器的标识符。

1
2
3
4
5
6
7
8
9
10
11
12
div {
p {
margin-bottom: 1.4px;
&:hover {
color: #999;
}
}
}

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

2.2属性嵌套
示例1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}

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

示例2:

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}

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

3.代码重用之继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用选择器的继承,要使用关键词@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有关的组合选择器样式,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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声明及调用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin mixName {
float: left;
margin-left: 10px;
}

div {
@include mixName;
}

//编译后:
div {
float: left;
margin-left: 10px;
}

带参数mixin声明及调用
可以不给参数值直接写参数,如果给了值的话,就是参数的默认值,在调用的时候传入其他值就会把默认值覆盖掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin left($value: 10px) {
float: left;
margin-left: $value;
}
div {
@include left(66px);
}

//编译后:
div {
float: left;
margin-left: 66px;
}

带多组数值参数的mixin声明及调用
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables…。

1
2
3
4
5
6
7
8
9
10
11
@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使用示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@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中集成了大量的颜色函数,让变换颜色更加简单直接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$box-color: red;
ul {
color: $box-color;
}
li {
background-color: darken($box-color,30%);
}

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

其他颜色函数

1
2
3
lighten(#cc3, 10%)      // #d6d65c
grayscale(#cc3) // #808080
complement(#cc3) // #33c

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

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

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

1
2
3
4
5
6
@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后缀,即可直接导入了。rt方式存在。
一般来说基础的文件命名需要以’_’ 开头,如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀,可写成@import “partial”。但是倒入CSS文件的话,就需要“文件名+后缀”了。

1
2
3
4
5
6
@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

扫一扫,分享到微信

微信分享二维码
前端路漫漫
前端优秀功能合辑
© 2019 赵江龙
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • VUE传值
  • VUE通信
  • VUE共享数据
  • Kafa
  • ZooKeeper
  • HEXO
  • 博客
  • 产品设计规范
  • 前端CAKE
  • 前端笔记
  • 后端笔记
  • JAVA笔记
  • SpringBoot
  • VUE
  • TOMCAT
  • 域名
  • HTTPS
  • 响应式布局
  • 记录日志
  • AOP
  • 重装
  • Win10
  • 总结
  • 开发规范
  • Java多线程
  • 我的小站
  • JSX
  • MySql
  • webpack3
  • js格式化
  • Maven
  • MyBatis
  • Quartz
  • js计算
  • 官方教程
  • 河西走廊
  • 丝绸之路
  • 动态组件
  • 工厂函数
  • 正则表达式
  • GitHub
  • 开发总结
  • 网站开发规范
  • Slf4j
  • SEO优化
  • 生产环境
  • 优化
  • loading
  • 计算缩写
  • Excel
  • Excel公式
  • 读书
  • 后端渲染
  • 电影
  • github
  • 项目收集
  • JVM
  • mysql安装
  • webpack
  • 字符格式
  • 千分符
  • 生活
  • 衣服
  • 阿里云
  • web环境
  • 黑苹果
  • 教程
  • 离骚
  • SASS
  • MarkDown
  • Echart

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 每一次相见,都是久别重逢

    2019-11-23

    #离骚

  • 黑苹果教程

    2019-08-22

    #黑苹果#教程

  • 阿里云Web环境搭建

    2019-08-18

    #阿里云#web环境

  • 字符格式处理_千分符

    2019-08-18

    #字符格式#千分符

  • Webpack3升级4

    2019-08-18

    #webpack

  • MySql安装

    2019-08-18

    #mysql安装

  • Github项目收集

    2019-08-18

    #github#项目收集

  • ElementUI使用总结

    2019-08-18

    #VUE

  • 我的衣服啊

    2019-08-18

    #衣服

  • 我想要的生活

    2019-08-18

    #生活

  • JVM调优

    2019-08-17

    #JVM

  • VUE后台渲染初窥

    2019-08-16

    #后端渲染

  • 我爱观影

    2019-08-14

    #电影

  • 颜如玉

    2019-08-13

    #读书

  • Excel公式

    2019-08-07

    #Excel#Excel公式

  • Echart甘特图

    2019-08-04

    #Echart

  • 计算常用缩写

    2019-07-31

    #计算缩写

  • VUE项目的SEO优化

    2019-07-29

    #SEO优化

  • 关于VUE-loading

    2019-07-29

    #loading

  • 纪录片

    2019-07-28

    #河西走廊

  • Vue生产环境优化

    2019-07-27

    #生产环境#优化

  • Slf4j基本配置

    2019-07-27

    #Slf4j

  • GitHub项目代码管理

    2019-07-27

    #GitHub

  • 关于网站开发的总结

    2019-07-26

    #开发总结#网站开发规范

  • 正则表达式

    2019-07-24

    #正则表达式

  • VUE动态组件

    2019-07-23

    #动态组件#工厂函数

  • VUE官方教程深入解读

    2019-07-22

    #官方教程

  • 河西走廊

    2019-07-22

    #河西走廊#丝绸之路

  • SpringBoot配置

    2019-07-21

    #SpringBoot

  • JavaScript计算值

    2019-07-21

    #js计算

  • Spring整合Quartz动态任务

    2019-07-20

    #Quartz

  • Maven相关

    2019-07-18

    #Maven

  • JavaScript格式化

    2019-07-18

    #js格式化

  • MyBatis笔记

    2019-07-18

    #MyBatis

  • MySql笔记

    2019-07-17

    #MySql

  • 初识Webpack

    2019-07-17

    #webpack3

  • 达芬奇的小站

    2019-07-14

    #我的小站

  • Java多线程

    2019-07-13

    #Java多线程

  • 关于网站开发的总结

    2019-07-12

    #总结#开发规范

  • JSX初识

    2019-06-22

    #JSX

  • Win10重装相关

    2019-06-13

    #重装#Win10

  • SpringBoot-AOP记录操作日志

    2019-06-10

    #记录日志#AOP

  • 响应式布局

    2019-06-04

    #响应式布局

  • Tomcat配置说明

    2019-06-04

    #TOMCAT#域名#HTTPS

  • Blog笔记统一管理

    2019-06-02

    #HEXO#博客#SpringBoot

  • VUE开发中的小技巧

    2019-06-02

    #VUE

  • JAVA路漫漫

    2018-12-17

    #后端笔记#JAVA笔记

  • 前端路漫漫

    2018-12-10

    #前端笔记

  • SASS简介

    2018-12-08

    #SASS

  • 前端优秀功能合辑

    2018-12-08

    #前端CAKE

  • 原型设计基本规范-二

    2018-12-02

    #产品设计规范

  • 原型设计基本规范-一

    2018-12-02

    #产品设计规范

  • Kafka-Zookeeper搭建流数据处理平台

    2018-11-04

    #Kafa#ZooKeeper

  • MarkDown基本语法

    2018-11-04

    #MarkDown

  • VUE-关于组建间传值的问题

    2018-10-01

    #VUE传值#VUE通信#VUE共享数据

  • HEXO-搭建自己的免费博客

    2018-09-01

    #HEXO#博客

  • 为什么要写博客

    2018-09-01

    #博客

  • 源起
  • 为什么写博客
  • yilia主题
  • 关于我
  • 真的我
喜欢玩,喜欢分享。
享受互联网的便利,也想分享些自己的东西。
希望在互联网的浪潮上,留下我的名字。