SASS用法入门
本文参考了 阮一峰 老师对 SASS 用法的讲解。
学过 CSS 的人都知道，它不是一种编程语言，在日常的开发中，经常要写大量的 css 代码，有很多的重复代码，效率很低。Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports)等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。
下面是我整理的用法总结，供自己开发时参考，相信对一些初学者也有用。
一、安装和使用 Sass
1.1 安装
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
gem install sass
然后就可以使用了。
如果你想查看 sass 的版本，在命令行使用 sass -v 就可以看到。
2.1 使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
首先创建一个名为 demo.html 的文件代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head> <body>
<div id="box">
<h1>Hello world!</h1>
<p class="p1">
死亡如风，常伴吾身！
</p>
<p class="p2">
德玛西亚万岁！
</p>
</div>
</body> </html>
然后创建一个名为 test.scss 的文件，这里用来我们书写测试的 scss 代码。使用下面的代码我们可以把 scss 文件转为为我们页面引入的 css 文件。
sass test.scss test.css
我们可以看到此时的项目目录，多了一个 test.css 文件。
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。 * expanded：没有缩进的、扩展的css代码。 * compact：简洁格式的css代码。 * compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch test.scss:test.css
// watch a directory
sass --watch app/sass:public/stylesheets
二、基本用法
2.1 变量
SASS 允许使用变量，所有变量以 $ 开头。
$blue: blue;
#box {
width: 500px;
height: 500px;
border: 1px solid $blue;
}
在监听的基础上，可以看到 test.css 文件中同时生产了样式代码。在浏览器运行 demo.html 可以看到相应的样式改变。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side: left;
#box {
margin-#{$side}: 200px;
}
2.2 计算功能
SASS 允许在代码中使用算式：
$side: left;
$var: 500;
#box {
margin-#{$side}: 200px;
padding-top: 20px + 30px;
margin-top: $var * 0.1px;
}
2.3 嵌套
SASS 允许选择器嵌套。比如，下面的 CSS 代码：
#box h1{
color: red;
}
可以写成：
#box {
h1 {
color: red;
}
}
属性也可以嵌套，比如 border-color 属性，可以写成：
p {
border: {
color: red;
}
}
注意，border 后面必须加上冒号。
在嵌套的代码块内，可以使用 & 引用父元素。比如 a:hover 伪类，可以写成：
a {
&:hover {
color: yellow;
}
}
2.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
三、代码的重用
3.1 继承
SASS 允许一个选择器继承另一个选择器。比如，现有 p1:
.p1 {
color: green;
}
p2 要继承 p1 ,就要使用 @extend 命令：
.p2 {
@extend .p1;
font-size: 20px;
}
3.2 Mixin
Mixin 有点像 C 语言的宏（macro），是可以重用的代码块。
使用 @mixin 命令，定一个代码块：
@mixin right {
float: right;
width: 80px;
height: 80px;
}
使用 @include 命令，调用这个 mixin。
a {
@include right;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin border($value: 1px) {
border: $value solid #000;
}
使用的时候，根据需要加入参数。
a {
@include border(2px);
}
下面是一 个 mixin 的实例，用来生成浏览器前缀：
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}-#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，可以像下面这样调用：
#box {
@include rounded(top, right);
}
a {
@include rounded(bottom, left, 50px);
}
3.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
3.4 插入文件
@import 命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "path/filename.css";
四、高级用法
4.1 条件语句
@if 可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有 @else 命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
4.2 循环语句
SASS支持 for 循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持 while 循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each 命令，作用与 for 类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
4.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
SASS用法入门的更多相关文章
- sass 使用入门教程
我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...
- LESS 用法入门
本文旨在加深对 LESS 的理解和记忆,供自己开发时参考.相信对没有接触过 LESS 的程序员还是有用的,大佬绕路. 一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm ins ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- SASS 初学者入门
SASS 初学者入门 Sass 是什么? Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的. Sass可以简化你的 ...
- SASS用法指南-转
作者: 阮一峰 日期: 2012年6月19日 原文地址:http://www.ruanyifeng.com/blog/2012/06/sass.html 艹,没想到sass 2012年就有了.现在 ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
随机推荐
- leetcode.310最小高度树
对于一个具有树特征的无向图,我们可选择任何一个节点作为根.图因此可以成为树,在所有可能的树中,具有最小高度的树被称为最小高度树.给出这样的一个图,写出一个函数找到所有的最小高度树并返回他们的根节点. ...
- selenium自动化测试入门 Alert/Confirm/Prompt 弹出窗口处理
一.Alert/Confirm/Prompt弹出窗口特征说明 Alert弹出窗口: 提示用户信息只有确认按钮,无法通过页面元素定位,不关闭窗口无法在页面上做其他操作. Confirm 弹出窗口: 有确 ...
- Hive/Impala批量插入数据
问题描述 现有几千条数据,需要插入到对应的Hive/Impala表中.安排给了一个同事做,但是等了好久,反馈还没有插入完成--看到他的做法是:对每条数据进行处理转换为对应的insert语句,但是,实际 ...
- 如何让接口文档自动生成，SpringBoot中Swagger的使用
目录 一.在SpringBoot项目中配置Swagger2 1.pom.xml中对Swagger2的依赖 2.编写配置类启用Swagger 3.配置实体类的文档 4.配置接口的文档 5.访问文档 二. ...
- 小小知识点（二十六）关于5G发展的28个核心问题，来自华为内部的深度解读
本文来自微信公众号“腾讯深网”(ID:qqshenwang),作者 马关夏.36氪经授权转载. 一.5G先进性与行业应用 1.5G到底是什么?和4G比有什么不一样? 从国际电信联盟(ITU)的定义来看 ...
- 《吊打面试官》系列-ArrayList
你知道的越多,你不知道的越多 点赞再看,养成习惯 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和 ...
- c++中减字符0的作用(转)
在刷OJ题的时候遇到要读取“2013-3-1”形式的日期然后计算这个日期是该年的第几天, 显然我们读取的是字符串,但是计算第几天却要整型数来计算,这是这个问题的难点,下面是解决这个问题的代码: int ...
- a:visited不起作用的原因解析
目前大多数的网站都很少会出现"一个超链接被点击后改变其颜色"的需求,但也还是有一部分网站有这样的实际需求,也是为了能够让用户更容易区分哪些标题是被点击访问过了,这类需求大多在新闻类 ...
- 快速幂模板Super
//求x^nint ans=1;while(n){ if(n&1) ans=ans*x; x*=x; n>>=1;} 快速幂就是快速算底数的n次幂.其时间复杂度为 O(logN), ...
- DP-直线分割递推
在 DP 里有一类是直线分割平面的问题 , 也是属于递推 类的 . 一 . 直线分割平面的问题 先考虑第一个小问题 : n 条直线最多可以将平面分割成几部分 ? 想想 最优的分割方法是怎样的呢 ? ...