文章目录
Sass
Sass是什么(英文全称:Syntactically Awesome Stylesheets)
世界上最成熟、最稳定、最强大的专业级CSS扩展语言!(官网介绍)
Sass 是层叠样式表语言,是 CSS 扩展语言
Sass 文件后缀为
.scss
语法和代码格式跟 CSS 很相似,但浏览器并不支持 Sass 代码,需要编译为css文件
为什么使用 Sass
- Sass 扩展了 CSS3,增加了变量、css嵌套规则、混合器、继承等等特性
- 弥补了css代码无法实现复用,无法嵌套的缺点,提高代码编写效率
- 进行样式管理, 生成格式化的 CSS 代码,易于组织和维护
- 作为一个代码压缩工具,输出为压缩型代码,减少CSS文件体积,提高编译效率
以上介绍不能具体体现scss的优点,具体我们先看实例两个实例
数组
利用数组存储多个颜色,索引起始为1
$myColor: #1d1d1d #fff #ffae78 #62c500 #4b97e2;
.box{
background: nth($myColor,1); /*#1d1d1d*/
color: nth($myColor,6);
}
混合器
使用类似于函数
/*定义混合器宽高*/
@mixin wh($w,$h){
width: $w;
height: $h;
}
div{
@include wh(300px,200px);/*传参调用*/
}
sass安装及用法实例
sass的安装
-
sass基于Ruby语言开发而成,因此安装sass前需要先安装Ruby
-
sass详细安装过程及配置参考官方或其他教程,这里不再累述
-
打开cmd依次输入以下命令:
ruby -v
,sass -v
都出现版本号即安装成功
在开发软件中使用sass
- 这里以HBuilder为例介绍,依次按照步骤
最后重启软件就可以在sass文件里右键使用编译命令了
- 注意:浏览器并不支持 Sass 代码,需要把编译后的css引入html
文件整合
-
使用
@import
命令导入文件在此文件下编译把多个 SCSS 文件的代码整合为一个
custom.css
文件
/*custom.scss文件下*/
@import "public.scss";
@import "indexstyle"; /*可以不写后缀*/
- 整合后代码输出风格
展开输出 expanded: 正常模式
紧凑输出 compact 一行一行的输出
压缩输出 compressed 去掉所有换行和空格嵌套输出 nested (跟展开输出差不多, } 位置在行末)
例如压缩输出 compressed
-
打开sass插件配置,修改配置
修改代码输出路径及风格
"--output-style",
"compressed"
注释
-
Sass中有单行注释
//
和多行注释/* */
两种 -
编译之后单行注释不会保留,多行注释会保留
-
多行注释在压缩编译的时候,也不会被保留, 在第一个字符写 感叹号! 可强制保留
@charset "utf-8"; /*中文注释时不写会报错*/
/*!
强制保留
*/
Sass 变量
变量用于存储一些信息,实现代码重复使用
Sass 变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用 $ 符号 格式: $var:value
!global表示全局作用域, !default 默认值
$mFont: Helvetica,Arial, Verdana;
$mColor: red;
$mFontSize: 16px;
$mWidth: 200px;
body {
font-family: $mFont;
font-size: $mFontSize;
color: $mColor;
}
div {
$mColor:blue !global; / * !global表示全局作用域*/
color: $mColor;/*blue*/
width: $mWidth;
}
$color: red !default; /*!default会使用已有的 $color 默认值*/
全局变量可以定义在同一个文件用 @import 来导入
嵌套提高书写效率
/*sass*/
.nav{
ul{
color: #000;
}
li{
background: #ffaa7f;
}
}
/*编译输出css*/
.nav ul {
color: #000; }
.nav li {
background: #ffaa7f; }
/* 属性嵌套*/
{
font: {
size: 18px;
weight: bold;}
}
/*输出*/
{
font-size: 18px;
font-weight: bold;
}
@extend 继承提高代码复用率
.box {
height: 100px;
width: 100px;
background: #ffaa00;
}
.box1 {
@extend .box; /* 继承 .box 的样式*/
color: #000;
}
.box2 {
@extend .box;
color: #ffff7f;
}
/* 输出*/
.box, .box1, .box2 {
height: 100px;
width: 100px;
background: #ffaa00; }
.box1 {
color: #000; }
.box2 {
color: #ffff7f; }
其他详细使用方法请参考sass官方教程