SASS 入门笔记
参考资料:
sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。
关于 sass 的编译,采用 gulp + gulp-sass + browser-sync 的组合,详见 Gulp 常用插件 一文中「热重载」一节。
基本用法
变量
SASS 允许使用变量,所有的变量以 $
开头,用过 PHP 的同学会很熟悉。
值得注意的是,SASS 中的变量通常都不需要加引号,如果加了引号,则生成的 CSS 也带引号,如果没有引号,则生成的 CSS 也没有引号。
$borderRadius: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-radius: $borderRadius;
}
如果变量需要镶嵌在字符串之中,就需要写在 #{}
之中。
$side: left;
$borderRadius: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-top-#{$side}-radius: $borderRadius;
}
除了普通变量外,SASS 还支持 list 类型和 map 类型,list 类型有点像 JavaScript 中的数组,而 map 类型有点像 JavaScript 中的对象。
list 类型可通过空格,逗号,或者小括号分隔多个值,可用 nth($var, $index) 取值。其他函数请参考 sass Functions(搜索 list functions)
map 类型以 key-value 键值对出现,其中 value 又可以是 list 类型。格式为 $map: (key1: value1, key2: value2),可通过 map-get($map, $key) 取值。其他函数请参考 sass Functions(搜索 map functions)
计算功能
SASS 允许在代码中使用算式。
$base: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-top-left-radius: 10px + 20px;
border-top-right-radius: $base * 2;
border-bottom-left-radius: (100px / 2);
border-bottom-right-radius: 50px - 40px;
}
注意运算时单位(比如 px)要紧跟着数字,不能 (10+20)px,会被解析成 30 px
(数字和单位中间会有个空格)
嵌套
SASS 允许选择器嵌套。比如下面的 CSS 代码:
div.main h1 {
color: red;
}
可以写成:
div.main {
h1 {
color: red;
}
}
属性也可以嵌套:
div.main {
height: 100px;
width: 100px;
// background-color: red;
// 等价于下面的代码
background: {
color: red;
}
}
和选择器嵌套不同的是,这里要注意 background 后必须加上冒号。
在嵌套的代码块内,可以使用 &
引用父元素,在写伪类的时候比较常用:
a {
color: red;
&:hover {
color: black;
}
}
.post {
font-size: 1em;
&-head {
font-size: 1.8em;
}
}
注释
SASS 共有两种注释风格。
标准的 CSS 注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在 SASS 源文件中,编译后被省略。
在 /* 后面加一个感叹号,表示这是 "重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
@at-root
Sass3.3.0 中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。
// sass style
.content {
@at-root #{&}-header {
color: red;
}
@at-root #{&}-content {
color: blue;
}
}
// css style
.content-header {
color: red;
}
.content-content {
color: blue;
}
代码复用
继承
SASS 允许一个选择器,继承另一个选择器。
div.first {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend div.first;
border: {
color: red;
width: 10px;
style: solid;
}
}
也就是说,某个选择器可以继承另一个选择器的所有样式,并在它的基础上添加样式。
占位选择器 %
这里我们得强势插入占位选择器 %,配合 @entend 风味更佳。从 Sass 3.2.0 以后就可以定义占位选择器 %。这种选择器的优势在于:如果不调用则不会有任何多余的 css 文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了 @extend 去继承相应的样式,都会解析出来所有的样式。占位选择器以 % 标识定义,通过 @extend 调用。
比如这段代码:
.base {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend .base;
border: {
color: red;
width: 10px;
style: solid;
}
}
编译的结果是:
.base, div.second {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
border-color: red;
border-width: 10px;
border-style: solid;
}
但是 .base 这个类实际并没有用到,我们不希望它在样式表中,可以用占位选择器:
%base {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend %base;
border: {
color: red;
width: 10px;
style: solid;
}
}
这时我们再看生成的样式表:
div.second {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
border-color: red;
border-width: 10px;
border-style: solid;
}
Mixin
还是上面的例子,有两个 div,它们有一些基础样式,但是又不能用继承关系,这时就可以用 Mixin 定义可以复用的代码块。
使用 @mixin 命令,定义一个代码块。
@mixin divBase {
width: 100px;
height: 100px;
}
使用 @include 命令,调用这个 mixin。
div.first {
@include divBase;
background-color: green;
}
div.second {
@include divBase;
background-color: red;
}
其实这个例子举的不好,用 @extend 也能实现,但是mixin 的强大之处,在于可以指定参数和缺省值。
@mixin divBase($width: 100px, $height: 100px) {
width: $width;
height: $height;
}
div.first {
@include divBase;
background-color: green;
}
div.second {
@include divBase(20px, 50px);
background-color: red;
}
颜色函数
SASS 提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
插入文件
@import 命令,用来插入外部文件(.scss 和 .css 的后缀可以省略)。
@import 'b.scss';
@import 'c.css';
高级用法
条件语句
@if 以及 @else 以及 @else if 命令:
div.second {
width: 100px;
height: 100px;
@if (1 + 1 != 2) {
background-color: red;
} @else {
background: {
color: black;
}
}
}
注意 SASS 中只有 ==
、!=
没有 ===
。
循环语句
循环语句我觉得是 SASS 中最好用的功能,让我觉得 SASS 真的是一种 "编程语言"。
比如有一张雪碧图,如果仅仅用 CSS,我们可能会写出如下 "又臭又长" 的代码:
div.bg_1 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: 0 0;
}
div.bg_2 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: -50px 0;
}
div.bg_3 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: -100px 0;
}
我们先用 SASS 的 Mixin 复用一些代码(用 @extend 也可以):
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
div.bg_1 {
@include divBase;
background-position: 0 0;
}
div.bg_2 {
@include divBase;
background-position: -50px 0;
}
div.bg_3 {
@include divBase;
background-position: -100px 0;
}
接着我们就来用循环语句进一步精简代码。
SASS 支持 for 循环:
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
@for $i from 1 to 4 { // [1, 4)
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}
我们注意下上面的循环次数,是 [1, 4),如果想要 [1, 4],则要用 through 关键字:
@for $i from 1 through 4 { // [1, 4]
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}
支持 while 循环:
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
$i: 1;
@while $i < 4 {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
$i: $i + 1;
}
我们还可以用 each,语法为 @each $var in <list or map>
@each $i in (1, 2, 3) {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}
我们可以把 (1, 2, 3) 抽象为一个变量,有点 JavaScript 中数组的意思,这样更灵活,这样数字不一定是等比数列,适用范围就更广了。我喜欢 each!
$num: (1, 2, 3);
@each $i in $num {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}
自定义函数
@function double($n) {
@return $n * 2;
}
div.second {
width: 100px;
height: double(100px);
background-color: red;
}
SASS 入门笔记的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- Ruby小白入门笔记之 <Gemfile 文件>
因为初学Ruby,四处查资料无果,才来的贴出亲自试过的操作,覆盖整个个人入门笔记博客中,故所有的操作,都以最明了的方式阐述,当你创建完一个新的Rails应用后,你发现JAVA中我们可以编写maven聚 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- [Java入门笔记] 面向对象编程基础(二):方法详解
什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- redis入门笔记(2)
redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...
- redis入门笔记(1)
redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...
- OpenGLES入门笔记四
原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...
- OpenGLES入门笔记三
在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...
随机推荐
- VS2015企业版,社区版,专业版详细对比
VS2015 微软出了3个大版本,其实在前天晚上就放出了三个版本的对比说明.,但是昨天挂掉了..今天特意去看了..截取了自己觉得比较重要的分享一下. 首先我们最常用的 诊断调试工具 其次测试工具(区别 ...
- [JSP]JSP 简介
1.1 概述 1.1.1 什么是 JSP? JSP 全称是 Java Server Pages,是一种动态网页开发技术. 它与 PHP.ASP.ASP.NET 等语言类似,运行在服务端的语言. JSP ...
- 在docker中运行ASP.NET Core Web API应用程序
本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Cor ...
- 安装MySql for Visual Studio的坑
阅读目录 问题描述 解决过程 解决方案 总结 回到顶部 问题描述 安装MySql for Visual Studio 一般来说是为了能在VS的服务器数据连接的数据源中能选择MySql类型,如下图: 但 ...
- python 数据类型---列表使用 之一
列表的表现形式:其中的元素可以使任何数据类型,像 字符串,数字, 字典, 列表,变量 等任何类型 age = 28 name = ["Frank", "Lee" ...
- Unmanaged Exports使用方法
Unmanaged Exports,可以利用C#生成非托管的DLL文件. 从https://sites.google.com/site/robertgiesecke/下载UnmanagedExport ...
- 记录一次bug解决过程:规范变量名称和mybatis的使用以及代码优化
一.总结 Mybatis中当parameterType为基本数据类型的时候,统一采用_parameter来代替基本数据类型变量. Mybatis中resultMap返回一个对象,resultType返 ...
- Android开发学习—— activity
activity生命周期 #Activity生命周期###void onCreate()* Activity已经被创建完毕###void onStart()* Activity已经显示在屏幕,但没有得 ...
- iOS项目iCloud及CloudKit Dashboard运用
CloudKit是苹果推出的基于iCloud的一个云端数据存储服务.其 主要由下面两部分组成: 一个仪表web页面,用于管理公开数据的记录类型. 一组API接口,用于iCloud和设备之间的数据传递. ...
- yii2分页扩展之实现跳转到具体某页
作者:白狼 出处:http://www.manks.top/yii2_linkpager_widget.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...