文章目录
sass
1.什么是sass
Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码,易于组织和维护。
Sass 文件后缀为 .scss。
2.为什么使用sass
CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。而Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
3.sass的使用方式
sass是一个基于ruby环境的可编程的css,不能直接用于页面,他需要编译成css以后在html文件中引入使用。
浏览器并不支持 Sass 代码。因此,你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码
4.sass安装及使用
第一步:npm 安装
npm i -g sass
第二步:创建scss文件 ,例sass.scss
第三步:将scss文件转成css文件,在命令行窗口输入
sass sass.scss sass.css
会生成对应的css文件
运行html文件后效果如下
sass | scss | |
---|---|---|
文件拓展名不同 | Sass 是以“.sass”后缀为扩展名 | SCSS 是以“.scss”后缀为扩展名 |
语法规则 | 以严格的缩进式语法规则来书写,不带大括号({})和分号( ; ) | 与css类似 |
举例 | ![]() | ![]() |
5.sass基本语法
以下所有sass文件都指后缀名为.scss的文件
5.1 基本运算
scss | css |
---|---|
![]() | ![]() |
5.2 变量
Sass 变量可以存储以下信息:
字符串
数字
颜色值
布尔值
列表
null 值
- Sass 变量必须使用 $ 符号:
Sass 变量的作用域只能在当前的层级上有效果
可以使用 !global 关键词来设置变量是全局的
scss | css |
---|---|
![]() | ![]() |
- 复杂变量
// scss
$linkColor:#ffffff #6fb6fd;
div{
color: nth($linkColor,1);
background-color:nth($linkColor,2);
}
// css
div{
color: #ffffff;
background-color:#6fb6fd;
}
- 多值变量
多值变量:代表的是多维数据的存储方式,换句话说,所定义的相当于js中的数组。 其数据一般用空格分割, 但是也可以用 逗号 或者小括号分割多个值
// scss
$list : (20px 40px)(30px 20px 10)(4px 3px 2px 5px);//相当于多维数组
.main {
margin: nth($list,1);
padding: nth($list,2);
border-radius: nth($list,3);
}
// css
.main {
margin: 20px 40px;
padding: 30px 20px 10;
border-radius:4px 3px 2px 5px;
}
- 以键值对形式出现的数据,相当于js中的对象,可以结合each完成循环渲染
// scss
$headers:(box1:red,box2:yellow,box3:green);
@each $key, $value in $headers{
.#{$key}{
background-color: $value;
}
}
//css
.box1 {
background-color: red;
}
.box2 {
background-color: yellow;
}
.box3 {
background-color: green;
}
5.3嵌套
- 选择器的嵌套
// scss
ul{
list-style: none;
li{
float: left;
>a {
color:#f00;
}
}
}
// css
ul{
list-style: none;
}
ul li{
float: left;
}
ul li>a {
color:#f00;
}
- 属性嵌套
// scss
.main{
border:{
style:solid;
left:none;
right:1px;
color:#b6b6b6;
}
}
// css
.main{
border-style:solid;
border-left:none;
border-right:1px;
border-color:#b6b6b6;
}
- & 代表上一层选择器
5.4混合mixin
@mixin定义
@include调用
分两种情况:mixin有参数及无参数
- mixin无参数
// scss
@mixin marginCenter{
margin-left:auto;
margin-right:auto;
}
.container{
width: 1000px;
@include marginCenter;
}
// css
.container{
width: 1000px;
margin-left:auto;
margin-right:auto;
}
- mixin有参数
//scss
@mixin left ($a,$b:20px) {
margin-left: $a;
margin-right:$b;
}
.box{
@include left(30px)
}
.box1{
@include left(20px,40px)
}
//css
.box {
margin-left: 30px;
margin-right: 20px;
}
.box1 {
margin-left: 20px;
margin-right: 40px;
}
5.5条件判断
$f:10;
@if($f > 10){
.box{
width:300px;
height:300px;
background: red;
}
}@else{
.box{
width:2200px;
height:300px;
background: red;
}
}
5.6循环
方式1:@for $i from 开始值 through 结束值
方式2:@for $i from 开始值 to 结束值
区别:方式1包括结束值,方式2不包括结束值。其中“开始值”和“结束值”都是正整数。
//scss
@for $i from 1 through 3
{
.item-#{$i}
{
width:(20px * $i);
}
}
//css
.item-1 {
width: 20px;
}
.item-2 {
width: 40px;
}
.item-3 {
width: 60px;
}
5.7函数
sass定义了很多函数可供使用,也可以函数,以@fuction开始。
实际项目中使用最多的应该是颜色函数
而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten( c o l o r , color, color,amount)和darken( c o l o r , color, color,amount),它们的第一个参数都是颜色值,第二个参数都是百分比。
// scss
$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
@return $px/$baseFontSize*1rem;
}
html {
font-size:$baseFontSize;
}
body{
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
// css
html {
font-size:10px;
}
body{
color:#e6e6e6;
}
.test{
font-size:1.6rem;
color:#b3b3b3;
}
5.8 插值
- 通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”,从而来“构造”一个新的选择器名、新的属性名以及新的属性值
#{$变量名}
// scss
$name:top;
.header-#{$name}{
border-#{name}:1px solid #b6b6b6;
}
// css
.header-top{
border-top:1px solid #b6b6b6;
}
5.9导入
@import ‘文件名’