SCSS/SASS环境配置及使用方法

来源：齐鲁CMS 栏目：html5 css3 jQuery 阅读：日期：2024-06-19

SCSS SASS环境配置及使用方法在使用 SCSS 之前，需要先安装 Node.js 和 npm scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开发效率

安装环境

在使用 SCSS 之前，需要先安装Node.js和npm

使用 npm 安装 Sass：

npm install -g sass

检查安装是否成功：

sass --version

将 SCSS 文件编译为 CSS 文件：

sass input.scss output.css

或者

sass --watch input.scss:output.css

使用方法

scss语法以.scss文件后缀结尾，其中语法格式为sass或scss，两种语法在书写风格如下：

scss

.container {
width: 100px;
height: 100%;
.nav {
width: 100px;
}
}

sass

.container
width: 100px;
height: 100%;
.nav
width: 100px;

1 嵌套规则 (常用)

.container {
width: 500px;
height: 100px;
header {
width: 100%;
height: 20%;
}
main {
width: 100%;
height: 20%;
}
footer {
width: 100%;
height: 20%;
}
}

编译后

.container {
width: 500px;
height: 100px;
}
.container header {
width: 100%;
height: 20%;
}
.container main {
width: 100%;
height: 20%;
}
.container footer {
width: 100%;
height: 20%;
}

2 父选择器 (常用) 使用 &

.container {
width: 500px;
height: 100px;
&_header {
width: 100%;
height: 20%;
&:hover {
color: red($color: #000000);
}
}
&_main {
width: 100%;
height: 20%;
&:disabled {
color: red;
}
}
&_footer {
width: 100%;
height: 20%;
&::after {
position: absolute;
content: '';
}
}
}

编译后

.container {
width: 500px;
height: 100px;
}
.container_header {
width: 100%;
height: 20%;
}
.container_header:hover {
color: 0;
}
.container_main {
width: 100%;
height: 20%;
}
.container_main:disabled {
color: red;
}
.container_footer {
width: 100%;
height: 20%;
}
.container_footer::after {
position: absolute;
content: '';
}

3 属性简写 (不常用)

.container {
width: 500px;
height: 100px;
font: {
family: fantasy;
size: 30em;
weight: bold;
}
background: {
image: url('xxx');
size: 100%;
}
}

编译后

.container {
width: 500px;
height: 100px;
font-family: fantasy;
font-size: 30em;
font-weight: bold;
background-image: url('xxx');
background-size: 100%;
}

4 变量 (常用) 使用$

全局变量在scss文件顶部定义的变量

$font-color: red;
$font-size: 18px;
$font-size-base: $font-size;

.text {
color: $font-color;
font-size: $font-size;
}

span {
font-size: $font-size-base;
}

编译后

.text {
color: red;
font-size: 18px;
}

span {
font-size: 18px;
}

局部变量在属性内定义的变量为块级变量

.text {
$font-color: red;
$font-size: 18px;
$font-size-base: $font-size;
h1 {
color: $font-color;
font-size: $font-size;
span {
color: $font-color;
font-size: $font-size;
}
}
}

编译后

.text h1 {
color: red;
font-size: 18px;
}
.text h1 span {
color: red;
font-size: 18px;
}

5 运算 (常用) 支持+ - * /运算

$base-width: 10;
$small-width: 30;
$large-width: $base-width + $small-width;

.div {
width: $large-width + px;
}

.div1 {
width: $small-width - $base-width + px;
}

.div2 {
width: $small-width * $base-width + px;
}

.div2 {
width: calc($small-width / $base-width) + px;
}

编译后

.div {
width: 40px;
}

.div1 {
width: 20px;
}

.div2 {
width: 300px;
}

.div2 {
width: 3px;
}

6 @extend 集成其他样式规则

.item {
width: 100%;
height: 20%;
background-color: red;
}

.item-1 {
@extend .item;
border: 1px solid blue;
}

.item-2 {
@extend .item;
border: 2px solid blue;
}

编译后

.item,
.item-2,
.item-1 {
width: 100%;
height: 20%;
background-color: red;
}

.item-1 {
border: 1px solid blue;
}

.item-2 {
border: 2px solid blue;
}

7 @if 当条件满足时，输入对应的样式

p {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
@if null {
border: 3px double;
}
}

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}