sass 使用入门教程

我们都知道，css没有变量，也没有条件语句，在开发过程中，难免有些麻烦，因此有了CSS预处理器(css preprocessor)，Sass便是其中之一。

一、什么是Sass

Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。这里是官方文档。

二、安装是Sass

因为Sass依赖于Ruby环境，所以安装Sass前，需要安装Ruby环境，官网下载。

安装时请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

（安装Ruby时，路径中请勿出现中文，避免后续安装Sass失败）

安装完Ruby环境后，在开始菜单中，找到刚才安装的ruby，打开Start Command Prompt with Ruby

然后直接命令行输入

gem install sass

按回车确认，等待一段时间就会提示Sass安装成功，现在因为墙的比较厉害，如果没有安装成功，请参考淘宝的RubyGems镜像安装sass，如果成功则忽略。

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

三、编译Sass工具

Sass文件后缀为 .scss，因此要编译成 .css 文件。

1）命令行编译

sass style.scss style.css

Sass 提供4种编译风格

# nested：嵌套缩进的css代码，它是默认值。
# expanded：没有缩进的、扩展的css代码。
# compact：简洁格式的css代码。
# compressed：压缩后的css代码。

生产环境当中，一般选择最后一项。

sass --style compressed style.sass style.css

也可以监听某个文件或目录，一旦文件发生改变，就自动生成编译后文件

# 单文件监听命令
sass --watch input.scss:output.css
# 文件夹监听命令
sass --watch app/sass:public/stylesheets

css文件转成sass/scss文件（在线转换工具，css2sass）

sass-convert style.css style.sass
sass-convert style.css style.scss

2）GUI工具编译

koala , 一个优秀的免费编译器，界面清晰简洁，操作起来也非常简单，详细介绍大家可以移歩到大漠的博客：Less/Sass编译工具，koala使用指南，点击下载 koala 简单操作如下图：

3）编辑器编译

某些编辑器就内置了Sass编译，如webstorm等，而sublime text也有相应的插件可以使用：编译，保存即编译。

4）自动化工具编译，参考我的gulp 学习总结文章。

四、基本语法

1）变量

sass的变量名必须是一个$符号开头，后面紧跟变量名

//sass 样式
$red: #f00;
div {color: $red;
}
// 编译为css后
div {color:#f00;
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：

$top: top;
div {margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默认变量：仅需在值后面加入 !default即可，默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值

$color: red;
$color: blue !default;
div {color: $color;    /* color:red; */
}

多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象

list : 可通过空格，逗号或小括号分割多个值，使用 nth($变量名, $索引)取值。 list数据操作有其他函数，具体参考sass Functions

//一维数据
$px: 5px 10px 20px 30px;//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);// 例子
$px: 10px 20px;
div {margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key);

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}

2）计算功能

sass允许使用算式。

div {padding: 2px * 4px;margin: (10px / 2);font-size: 12px + 4px;
}

3）嵌套

标签嵌套

// sass 样式
div {color: #333;a {font-size:14px; &:hover {text-decoration:underline;}}
} // 编译后css
div {color: #333;
}
div a {font-size:14px;
}
div a:hover {text-decoration:underline;
}

属性嵌套：

//sass 样式
.fakeshadow {border: {style: solid;left: {width: 4px;color: #888;}right: {width: 2px;color: #ccc;}}
}//css 编译后样式
.fakeshadow {border-style: solid;border-left-width: 4px;border-left-color: #888;border-right-width: 2px;border-right-color: #ccc;
}

4）注释

sass有两种注释风格

标准css注释： /* 注释 */，会保留到编译后的文件中，压缩则删除

单行注释： // 注释

/*! 重要注释 */

5）继承

sass 中，选择器继承可以让选择器继承另一个选择器的所有样式

// sass样式
h1 {font-size:20px;
}
div {@extend h1;color:red;
}
// css编译后样式
h1 {font-size:20px;
}
div {font-size:20px;color:red;
}

使用占位符选择器 %

从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调用不会有多余的css文件

// sass样式
%h1 {font-size:20px;
}
div {@extend %h1;color:red;
}
// css编译后样式
div {font-size:20px;color:red;
}

6）混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...

//sass 样式
@mixin opacity($opacity:50) {opacity: $opacity / 100;filter: alpha(opacity=$opacity);
}.opacity{@include opacity;      //参数使用默认值  50/100 = 0.5
}
.opacity-80{@include opacity(80); //传递参数  80/100 = 0.8
}//  css编译后样式
.opacity{opacity: 0.5;filter: alpha(opacity=50);
}// ---------------------// 多参数
@mixin center($width, $height) {position: absolute;left:50%;top:50%;width:$width;height:$height;margin:(-$height / 2) 0 0 (-$width / 2);
}
div {@include center(200px, 100px);
}
// css编译后样式
div {position: absolute;left:50%;top:50%;width:200px;height:100px;margin:-50px 0 0 -100px;
}// -------------------//多组值
@mixin box-shadow($shadow...) {-webkit-box-shadow: $shadow;box-shadow: $shadow;
}
div {@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);}

@content：在sass3.2.0中引入，可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始

//sass 样式
@mixin max-screen($res){@media only screen and ( max-width: $res ){@content;}
}@include max-screen(480px) {body { color: red }
}//css 编译后样式
@media only screen and (max-width: 480px) {body { color: red }
}

使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {@-webkit-keyframes #{$name} {$browser: '-webkit-'; @content;}@-moz-keyframes #{$name} {$browser: '-moz-'; @content;}@-o-keyframes #{$name} {$browser: '-o-'; @content;}@keyframes #{$name} {$browser: ''; @content;}
}// 引入
@include keyframes(scale) {100% {#{$browser}transform: scale(0.8);}
}// css编译后
@-webkit-keyframes scale {-webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {-moz-transform: scale(0.8);
}
@-o-keyframes scale  {-o-transform: scale(0.8);
}
@keyframes scale  {transform: scale(0.8);
}

7）颜色函数

sass提供了一些内置的颜色函数

lighten(#cc3, 10%)　　  // #d6d65c
darken(#cc3, 10%) 　　　// #a3a329
grayscale(#cc3) 　　　　// #808080
complement(#cc3) 　　　// #33c

8）引入外部文件

使用 @import 命令引入外部文件，引入后，可使用外部文件中的变量等。

@import "_base.scss";

五、高级用法

1）函数 function

sass允许用户编写自己的函数，以@function开始

$fontSize: 10px;
@function pxTorem($px) {@return $px / $fontSize * 1rem;
}
div {font-size: pxTorem(16px);
}
// css编译后样式
div {font-size: 1.6rem;
}

2）if条件语句

@if语句可以用来判断

// sass样式
$type: monster;
div {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}
// css编译后样式
div {color: green;
}

三目判断：语法为 if($condition, $if_true, $if_false)。三个参数分别表示：条件，条件为真的值，条件为假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）循环语句

for循环有两种形式，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

// sass样式
@for $i from 1 to 4 {.item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {width: 2em;
}
.item-2 {width: 4em;
}
.item-3 {width: 6em;
}

while循环

// sass样式
$i: 2;
@while $i > 0 {.item-#{$i} {width: 2em * $i;}$i: $i - 1;
}
// css编译后样式
.item-2 {width: 4em;
}
.item-1 {width: 2em;
}

@each循环：语法为@each $var in <list or map>。其中$var表示变量，而list和map表示数据类型，sass3.3.0新加入多字段循环和map数据循环

单字段list数据循环

//sass 样式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
}
//css 编译后样式
.puma-icon {background-image: url('/images/puma.png');
}
.sea-slug-icon {background-image: url('/images/sea-slug.png');
}
.egret-icon {background-image: url('/images/egret.png');
}

多字段list数据循环

//sass 样式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');border: 2px solid $color;cursor: $cursor;}
}
//css 编译后样式
.puma-icon {background-image: url('/images/puma.png');border: 2px solid black;cursor: default;
}
.sea-slug-icon {background-image: url('/images/sea-slug.png');border: 2px solid blue;cursor: pointer;
}

多字段map数据循环

//sass 样式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}
//css 编译后样式
h1 {font-size: 2em;
}
h2 {font-size: 1.5em;
}
h3 {font-size: 1.2em;
}

六、在线工具

Sass在线编译工具在线CSS转Sass工具

参考资料：

大漠博客： Sass入门 & Sass中国

阮一锋：　Sass用法指南

Sass官网 & Sass文档 & Sass函数列表

转载于:https://www.cnblogs.com/morong/p/4329957.html

sass 使用入门教程相关推荐

【sass】安装及入门教程
文章目录一.基本介绍二.安装教程三.编译教程 3.1.单次编译 3.2.实时编译 3.3.实时监控目录一.基本介绍 sass是世界上最好的css扩展语言.在正常的编写css的基础上,增加了很多 ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
IntelliJ IDEA开发入门教程
IntelliJ IDEA开发入门教程本系列教程从 IntelliJ IDEA 的安装.卸载.软件设置.项目配置等各个方面进行讲解.通过本系列教程的学习,也希望你能爱上 IntelliJ IDEA, ...
create-react-app入门教程
create-react-app入门教程 Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具.它本身集成了Webpack,并配置了一系列 ...
webpack快速入门教程
webpack快速入门教程 1.webpack 介绍什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
Kafka入门教程与详解
1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...
【CV】Pytorch一小时入门教程-代码详解
目录一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...
python tornado教程_Tornado 简单入门教程（零）——准备工作
前言: 这两天在学着用Python + Tornado +MongoDB来做Web开发(哈哈哈这个词好高端).学的过程中查阅了无数资料,也收获了一些经验,所以希望总结出一份简易入门教程供初学者参考.完 ...
python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结视学算法 | 作者知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...

sass 使用入门教程

sass 使用入门教程相关推荐

最新文章

热门文章