如何使用CSS预处理器SCSS?

Her...

已于 2024-06-27 16:24:58 修改

阅读量1k

点赞数 1

分类专栏： CSS 其他文章标签： css scss 前端 javascript 开发语言

于 2023-01-17 14:17:49 首次发布

本文链接：https://blog.csdn.net/weixin_48082900/article/details/128713601

版权

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

其他

6 篇文章 0 订阅

订阅专栏

一、介绍

less、sass、scss都是css预处理语言

区别：

1.sass版本3.0之后就是scss

2.sass没有{}和；并且有严格的缩进规范

3.scss和css的缩进规范是一致的

二、学习工具简单测试 East Scss

1.直接在VScode中下载插件East Scss，地址如下：

Easy Sass - Visual Studio Marketplace

2.scss和less的使用方法几乎一致，简单测试一下效果

（1）新建learn-scss文件夹，在learn-scss下新建一个index.html

（2）新建scss文件夹，里面新建一个 test.scss

vscode中East Scss这个插件会自动把.scss文件转成.css文件

（3）直接在html文件中引入使用，打开浏览器即可看到效果

三、Scss的语法

1、和less使用一致的嵌套语法

（1）在html文件中

<div class="test">

<div class="box">

盒子

</div>

</div>

（2）在.scss文件中

.test {

width: 200px;

height: 200px;

background-color: yellowgreen;

margin: 0 auto;

.box {

width: 100px;

height: 100px;

background-color: green;

text-align: center;

line-height: 100px;

margin: 0 auto;

transform: translateY(50%);

}

}

.scss文件被转成css文件后

最终效果

2.用&代表父选择器

比如：a标签的悬停效果

（1）在html文件中

<div class="test">

<div class="box">

<a href="">点我啊</a>

</div>

</div>

（2）在.scss文件中

.test {

width: 200px;

height: 200px;

background-color: yellowgreen;

margin: 0 auto;

.box {

width: 100px;

height: 100px;

background-color: green;

text-align: center;

line-height: 100px;

margin: 0 auto;

transform: translateY(50%);

a{

font-size: 25px;

&:hover{

color: red;

font-size: 16px;

}

}

}

}

3.用$符号定义变量

4.使用mixins实现代码复用

定义的格式：

@mixin 名称 { 代码 }

适用的格式：

@include 名称

把前面的样式改造一下，如下:

$color:plum;

$border-width:400px;

@mixin box{

width: 100px;

height: 100px;

background-color: green;

}

.test {

width: $border-width;

height: 200px;

background-color: $color;

margin: 0 auto;

.box {

@include box;

text-align: center;

line-height: 100px;

margin: 0 auto;

transform: translateY(50%);

a{

font-size: 25px;

&:hover{

color: red;

font-size: 16px;

}

}

}

}