15-Sass

最新推荐文章于 2024-07-27 06:13:26 发布

sayyesb

最新推荐文章于 2024-07-27 06:13:26 发布

阅读量196

点赞数

分类专栏： HTML及CSS 文章标签： ruby vscode

本文链接：https://blog.csdn.net/sayyesb/article/details/120112290

版权

HTML及CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

CSS弊端

css是一门非程序式语言，没有变量，函数，scope作用域等概念
不方便后期维护与扩展，不利于复用
css没有很好的计算能力
非前端工程师来讲，往往会因为确少css编写经验而很难写出组织良好且易于维护的css代码项目

sass/less（leaner style css）介绍

sass/less是一门css扩展语言，也被称为css预处理器，作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序语言的特征。
它在css的语法的基础上引入了变量，mixin(混入)，继承（content），运算以及函数等功能，大大简化了css的简写，并且降低了css维护成本。

sass定义

Sass是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。Sass是一种动态样式表语言，扩展了CSS的功能。 Sass也是跨浏览器友好Sass预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动CSS。
Sass是对css的一个扩展。通过其提供的变量、嵌套、混合、条件、循环等特性能够极大的提高编写css代码的效率
Sass本质上是一个脚本（编程）语言。有自己的编写语法。编写的代码通过编译后能够转为被浏览器识别的css代码，即Sass代码需要转为css代码才能使用
网址：https://www.sass.hk/

SASS/less作用

能够极大的提高编写css代码的效率
方便后期维护与扩展

一、sass安装

1、通过命令来执行

先安装ruby（Sass的底层实现）
再安装Sass

2、使用VScode插件安装

使用easy sass插件
安装 easy Sass插件
新建以 .sass 或 .scss为后缀的文件，在里面书写Sass代码
sass 是旧版本的Sass文件格式
scss是Sass新版本的文件格式
easy Sass插件会自动将Sass转为css文件。在页面上引入转换之后的css文件即可
手动指定转换的css文件保存路径
- 打开 settings.json
- 将easy Sass的配置代码放入settings.json中
- 修改vscode配置文件 setting.json 能够自定义Sass代码转css代码的配置

//保存scss代码后自动转为css代码
"easysass.compileAfterSave": true,
//制定转为什么格式的css代码
"easysass.formats": [
//nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代
码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
"easysass.targetDir": "../css/" //路
径

二、基本用法

1、注释

SASS注释中两种风格的注释

1、标准的css注释/* comment* /。会被编译

2、单行注释 // comment，只保留在SASS源文件中，编译后被省略。

3、注意：在/后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息

2、嵌套

s使用层级完成CSS样式
嵌套结构中也可以使用兄弟，子元素选择器
嵌套语法中使用&连字符符号选择父元素自身或者其伪类

SASS允许选择器嵌套

作用：让css代码层级结构清晰明了。不会出现父子标签之间的权重问题

语法

父选择器{
    css属性 : css属性值； //针对父标签的样式
    子标签选择器{
        css属性 : css属性值； //针对子标签的样式
    }
}

嵌套中使用兄弟选择器，子元素选择器

语法
```
ul,
div,
a {
    width:200px
    
}
```

在嵌套的代码块内，可以使用&引用父元素/自身元素

ul{
    li {
        &:hover {
            background:red;
        }
    }
}

3、变量

SASS允许使用变量，所有变量以$开头

变量：临时保存数据的容器，容器不变，数据可变
语法：$变量名：数据；
规范：
- 数据可以是任意css属性的属性值。比如说
- 70px，50%，2rem等，还可以是组合属性的数据，比如 1px solid red 或 move 3s
- 变量名可以包含数字、字母、-、_
- 尽量不要以数字开头多个单词间尽量以-间隔先定义再使用
- 变量可以保存一个数据也可以保存一组数据全局变量、局部变量
变量分类：
- 全局变量：指在scss文件开头定义的变量，文件里任意位置都可以使
- 局部变量：定义在某个{} 里的变量，局部变量只能在定义时所在{}里使用注意：如果有同名的全局变量和局部变量，那么在局部变量所在 {}中，会优先使用局部变量，其他位置会使用全局变量
- 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

//申明变量
$width:500px;
$side:right;
div {
    width:$width;
}

div {
    //表示右外边距：500px
    margin-#{$side}:$width;
}

4、计算功能

SASS允许在代码中使用算式

概念：可以使用数学中的基本运算（加减乘除）
语法
- 运算符号两边要有空格
- % 尽量不要和px混算，使用简单数学函数
- random()：返回0-1之间的随机小数
- 配合乘法可以用于生成随机的数据，比如rgb、尺寸等
- round()：四色五入。例如：round（123.4px）结果：123px
- floor()：向下取整，即获取不大于数字的最接近的整数。
  - 例如：floor(23.1px) 得到23px，floor(23.9px)得到23px
- ceil()：向上取整，即获得不小于数字的最接近的整数。
  - 例如：ceil(12.3px)得到13px
- max()：在多个数之间取最大的数字
  - max(23px,123px,100px)得到123px
- min()：在多个数之间取最小的数字
  - min(23px,123px,100px)得到23px；

5、继承

SASS允许一个选择器，继承另一个选择器 :@extend 选择器

.box {
    width:200px;
    height:100px;
}

p {
    background-color:red;
}

//继承
//给div设置了宽200高100，背景色红色
div {
    @extend .box;
    @extend p;
}

6、混合

@Mixin，是可以重用的代码块

使用@mixin命令，定义一个代码块
使用@include命令，调用这个mixin。

1.定义混合

@mixin 混合名{包含的一段Sass代码}

2.使用混合

@include 混合名 ;

注意：

在使用混合的地方会自动将混合里的scss代码放入到引用的位置。即使用了一次混合里的scss代码混合需先定义再使用。不能在定义之前使用。
混合名规范见词达义：尽量混合名能够表单该混合的作用
mixin的强大之处，在于可以指定参数和缺省值使用的时候，根据需要加入参数：

定义混合，添加参数 @mixin 混合名($变量名：默认值){ $变量的数据来自于使用混合时用户传入的数据，如果没有传入数据，则使用默认值$变量只能在混合里使用 };
使用混合时，传入参数 @include 混合名(数据); 该数据会自动赋值给混合里的$变量

7、导入文件

import命令，用来导入外部文件

概念：能够将scss代码拆分单独的放入scss文件中
进行管理，如果其他文件要使用，直接通过@import在文件开头引入即可。
语法：@import "要引入的scss文件相对路径";

8、条件判断

@if可以用来判断

@if 判断条件{
    判断条件成立时会使用的样式
}

配套的还有@else命令：

@if 判断条件{
    判断条件成立时会使用的样式
}@else{
    判断条件不成立时会使用的样式
}

//@if完整语法：

@if 判断条件1{
    判断条件1成立时会使用的样式
}@else if 判断条件2{
    判断条件1不成立，同时判断条件2成立时会使用
的样式
}@else if 判断条件n{
    之前的条件都不成立，同时判断条件n成立时会使
用的样式
}@else {
    所以判断条件都不成立时会使用的样式
}
注意：无论有多少个else if ，最终if、else if、else只会执行其中一个。

Sass中常用的判断符号（关系运算符）

==：判断是否等于某个数据。比如$theme=="black"表示判断$theme变量的数据是否是 "black";
!=：判断是否不等于某个数据
》大于。比如 $width>20px，判断$width里的数据是否大于20px
<：小于。比如 $width<20px，判断$width里的数据是否小于20px
》=：大于或等于。比如 $width>=20px，判断$width里的数据是否大于或等于20px
<=：小于或等于。比如 $width<=20px，判断$width里的数据是否小于或等于20px

9、循环

定义：重复执行一些逻辑代码

语法：for循环的两种使用方式

//第一种：

@for $变量 from 开始数字 to 结束
数字 {
    //需要重复编写的代码
    在这里面，$变量每次循环的值不一样，
    每次自增1，第一次的值为开始数字，最后一次
    循环的数字是结束数字-1
}
//代码流程
1. $i 取值是从开始数字开始，
2. 每次都会编写一次{}里的代码，编写后$i
的数字自动自增1，
3. 判断$i的数据是否大于或等于结束数字，
如果满足条件，那么结束代码执行。如果不满
足执行第2步。


//第二种：
@for $变量 from 开始数字 through
结束数字 {
//需要重复编写的代码
在这里面，$变量每次循环的值不一样，
每次自增1，第一次的值为开始数字，最后一次
循环的数字是结束数字
}

to和 through的区别

to是不包含结束数字，而through是包含结束数字的。

sayyesb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15-Sass

前言CSS弊端 css是一门非程序式语言，没有变量，函数，scope作用域等概念不方便后期维护与扩展，不利于复用 css没有很好的计算能力非前端工程师来讲，往往会因为确少css编写经验而很难写出组织良好且易于维护的css代码项目 sass/less（leaner style css）介绍 sass/less是一门css扩展语言，也被称为css预处理器，作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序语言的特
复制链接

扫一扫

专栏目录