Sass预处理器、混合器和Sass运算

最新推荐文章于 2024-07-15 10:40:17 发布

CYSDLN

最新推荐文章于 2024-07-15 10:40:17 发布

阅读量184

点赞数 1

分类专栏：学习笔记文章标签： sass 前端 javascript css

本文链接：https://blog.csdn.net/CYSNLD/article/details/125998838

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1. 什么是Sass?

Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

2.Sass简介

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码，易于组织和维护。

Sass 文件后缀为 .scss。

3. 为什么使用Sass？

它能够帮我们更快更高效的编写更好维护的 css；
Sass 引入合理的样式复用机制，可以节约很多时间来重复。

Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。

4. Sass语法

他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。.scss为拓展名

4.1 变量

变量可以存储样式信息，以便后面使用。
比如一个样式在页面的多个地方使用，就可以先将该样式的值赋给一个变量，后面直接使用变量即可。

语法： $变量名：样式值；
使用： $变量名；
注意点：

以$符号开头，后跟变量名
多个单词，变量名以-分割，如：$theme-color
变量写在#{}中以镶嵌入字符串

示例如下：

// .scss文件  Sass后缀名为scss
$dark: #000;
$side: left;
.box {
	color: $dark;
}

.box2 {
	background: $dark;
	border-#{$side}-radius: 5px;
}

--------------------------------------

// 生成的css代码
.box1 {
  color: #000;
}

.box2 {
  background: #000;
  border-left-radius: 5px;
}

4.2 嵌套

1. 选择器嵌套

选择器相同放外边选择器不同放里边

子元素在父元素样式的一对大括号{}内如：ul { li { } }

爷爷 {
	爸爸 {
		儿子 {
			孙子 {
			
			}
		}
	}
}

body,
div,
ul,
li,
p {
    margin: 0;
    padding: 0;
}

.zt {
    width: 100%;
    margin: 0 auto;

    .one {
        img {
            width: 100%;
        }
    }
}

编译后
body,
div,
ul,
li,
p {
    margin: 0;
    padding: 0
}

.zt {
    width: 100%;
    margin: 0 auto
}

.zt .one img {
    width: 100%
}

2. 伪类嵌套

从上面我们可以看出，选择器嵌套得出的css样式相当于后代选择器一样，中间都有一个空格分隔，那如果想给一个元素添加:hover要怎么做呢?

&符就是来解决这个问题的。
语法: &:hover { }
示例如下：


<div class="box">
	<a href="javascript:;">hello</a>
</div>
// .scss文件
// 这里我们希望鼠标悬停a的文本颜色改变
.box {
	a {
		&:hover {
			color: red;
		}
	}
}


编译后
.box a:hover {
  color: red;
}

继承

如果定义一个类名专门用来存放样式，他这个类在html中没有任何意义，并没有class声明，所以这里用占位符会更好，但是如果在html中有用处也是可以去使用类名，继承元素最好不要是包含元素样式

占位符选择器%

@extend 类名相当把继承的元素以群组选择器的方式在选择器前进行添加

.btn{                          //main .btn 包含选择器 尽量不使用 占位符选择器 %.btn

    border-radius: 20px;
}
.box-size{
    width: 200px;
    height: 100px;
}
.btn-one{
    @extend .btn;
    @extend .box-size;
    background-color: red;
    color: aqua;
    border-radius: 10px solid blue;
}
.btn-two{
    @extend .btn;
    @extend .box-size;
    background-color: red;
    color: rgb(0, 255, 102);
    border-radius: 10px solid rgb(255, 0, 242);
}
.btn-three{
    @extend .btn;
    @extend .box-size;
    background-color: rgb(236, 148, 15);
    color: rgb(162, 255, 0);
    border-radius: 10px solid rgb(0, 191, 255);
}
.btn-for{
    @extend .btn;
    @extend .box-size;
    background-color: rgb(234, 0, 255);
    color: rgb(85, 255, 0);
    border-radius: 10px solid rgb(9, 9, 41);
}