scss快速入门

最新推荐文章于 2024-07-22 09:25:47 发布
最新推荐文章于 2024-07-22 09:25:47 发布
阅读量435 收藏 4
点赞数
文章标签： webpack 前端 ViewUI
原文链接：https://juejin.im/post/5cf488ea518825378867758f
版权

在使用scss之前，我们要知道Sass、Scss有什么不同？

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件，官方解释。

传统的css文件缺失变量等概念，导致需要书写的重复的代码很多。我写JS的习惯是遇见重复的代码就要思考是否可以抽出来写成一个可复用的方法，但css中不存在变量函数等概念，这时我发现的一个css的预编译利器——scss。

scss具有简单易上手等特点，下面开始编写第一个scss文件。

准备工作

写在最前面：有小伙伴可能不太会部署前端环境，这里我将代码上传到github中，有需要的小伙伴可以把代码下载下来对照着看SCSS代码与编译后的CSS代码。

scss需要经过编译为css才能被浏览器识别，我这里只做一个小demo所以不上vue-cli，直接使用webpack进行编译。

首先安装css-loader、style-loader、node-sass、sass-loader。

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev
复制代码

然后在webpack.config.js配置文件中添加对应的loader,完整的配置图如下。

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js',
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, './dist')
    },
	module: {
		rules: [
            {
                test: /\.scss/,
                use: ['style-loader', 'css-loader','sass-loader']
            },
			{
				test: /\.vue$/,
				use: 'vue-loader'
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}

复制代码

创建一个App.scss文件，接着在入口文件中引入。

import './App.scss';
复制代码

后面我们将在App.scss中编写scss代码。

正式开始

1.使用变量

SCSS中的变量以&开头。

&border-color:#aaa; //声明变量
.container {
&border-width:1px;
    border:&border-width solid &border-color; //使用变量
}
复制代码

上述例子中定义了两个变量，其中&border-color在大括号之外称为全局变量，顾名思义任何地方都可以使用，&border-width是在.container之内声明的，是一个局部变量，只有.container内部才能使用。

编译后的CSS

.container {
    border:1px solid #aaa; //使用变量
}
复制代码

我们可以把SCSS看做一个模板引擎，编译的过程中用变量的值去替代变量所占据的位置。

tips:SCSS中变量名使用中划线或下划线都是指向同一变量的，上文中定义了一个变量&border-color，这时再定义一个变量&border_color:#ccc,他们指向同一个变量，.container的值会被第二次定义的变量覆盖。

&border-color:#aaa; //声明变量
&border_color:#ccc;
.container {
    &border-width:1px;
    border:&border-width solid &border-color; //使用变量
}
编译后的CSS
.container {
    border:1px solid #ccc; //使用变量
}
复制代码

这个例子中我们要知道

（1）变量名使用中划线或下划线都是指向同一变量的。

（2）后定义的变量声明会被忽略，但赋值会被执行，这一点和ES5中var声明变量是一样的。

2.嵌套规则

我们先来看一个例子。

/*css*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
}

.container ul:after {
    display:block;
    content:"";
    clear:both;
}

.container ul li {
    float:left;
}

.container ul li>a {
    display:inline-block;
    padding:6px 12px;
}
复制代码

这是一个让列表元素横向排列的例子，我们在这个例子中写了很多重复的代码，.container写了很多遍，下面我将用SCSS简写上面的例子。

2.1嵌套选择器
/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
}

.container ul:after {
    display:block;
    content:"";
    clear:both;
}
复制代码

这里我们可以将公共的父元素提取出来。

2.2嵌套中的父级选择器

SCSS提供了一个选择器可以选中当前元素的父元素，使用&表示，下面用父级选择器继续简化代码。

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
    }
    
    li>a {
        display:inline-block;
        padding:6px 12px;
    }
    
    &:after {
        display:block;
        content:"";
        clear:both;
    }
}
复制代码

父级选择器中需要注意，只能在嵌套内部使用父级选择器，否则SCSS找不到父级元素会直接报错。 在各种伪类选择器中，父级选择器是十分常用的。

2.3嵌套组合选择器

在嵌套规则中可以写任何css代码，包括群组选择器（,），子代选择器（>），同层相邻组合选择器（+）、同层全体组合选择器（~）等等，下面继续将自带选择器简化掉。

/*scss*/
.container ul {
    border:1px solid #aaa;
    list-style:none;
    
    li {
        float:left;
        
        >a {
            display:inline-block;
            padding:6px 12px;
        }
    }
    
    &:after {
        display:block;
        content:"";
        clear:both;
    }
}
复制代码

子代选择器可以写在外层选择器右边（如下述例子）也可以写在内层选择器左边（如上述例子）。

li >{ 
    a {
        display:inline-block;
        padding:6px 12px;
    }
}
复制代码

写在外层选择器右边时要特别注意，他会作用于所有嵌套的选择器上，尽量不要采用这类写法，我认为扩展性不强，也容易出错。

2.4嵌套属性

先看一个例子

/*css*/
li {
    border:1px solid #aaa;
    border-left:0;
    border-right:0;
}
复制代码

这个例子中我们只需要两条边框，使用SCSS重写一遍。

/*scss*/
li {
    border:1px solid #aaa {
        left:0;
        right:0;
    }
}
复制代码

scss识别一个属性以分号结尾时则判断为一个属性，以大括号结尾时则判断为一个嵌套属性，规则是将外部的属性以及内部的属性通过中划线连接起来形成一个新的属性。

3.导入SCSS文件

大型项目中css文件往往不止一个，css提供了@import命令在css内部引入另一个css文件，浏览器只有在执行到@import语句后才会去加载对应的css文件，导致页面性能变差，故基本不使用。SCSS中的@import命令跟原生的不太一样，后续会讲解到。

3.1导入变量的优先级问题-变量默认值
/*App1.scss*/
&border-color:#aaa; //声明变量
@import App2.scss;  //引入另一个SCSS文件
.container {
    border:1px solid &border-color; //使用变量
}
/*App2.scss*/
&border-color:#ccc; //声明变量

/*生成的css文件*/
.container {
    border:1px solid #ccc; //使用变量
}
复制代码

这可能并不是我们想要的，有时候我们希望引入的某些样式不更改原有的样式，这时我们可以使用变量默认值。

/*App1.scss*/
&border-color:#aaa; //声明变量
@import App2.scss;  //引入另一个SCSS文件
.container {
    border:1px solid &border-color; //使用变量
}
/*App2.scss*/
&border-color:#ccc !default; //声明变量

/*生成的css文件*/
.container {
    border:1px solid #aaa; //使用变量
}
复制代码

导入的文件App2.scss只在文件中不存在&border-color时起作用，若App1.scss中已经存在了&border-color变量，则App2.scss中的&border-color不生效。

!default只能使用与变量中。

3.2嵌套导入

上一个例子中我们是在全局中导入的App2.scss，现在我们在为App2.scss添加一些内容，并在局部中导入。

/*App1.scss*/
&border-color:#aaa; //声明变量
.container {
    @import App2.scss;  //引入另一个SCSS文件
    border:1px solid &border-color; //使用变量
}
/*App2.scss*/
&border-color:#ccc !default; //声明变量
p {
    margin:0;
}

/*生成的css文件*/
.container {
    border:1px solid #aaa; //使用变量
}
.container p {
    margin:0;
}
复制代码

可以看得出来，就是将App2.scss中的所有内容直接写入到App1.scss的.container选择器中。

3.3 使用原生@import

前面我们说到基本不使用原生@import，但某些情况下我们不得不使用原生@import时了，SCSS也为我们处理了这种情况，直接导入css文件即可。

@import 'App.css';
复制代码

4.注释

SCSS中的注释有两种

（1）/*注释*/:这种注释会被保留到编译后的css文件中。

（2）//注释:这种注释不会被保留到编译后生成的css文件中。

5.混合器（函数）

5.1声明一个函数

使用@mixin指令声明一个函数，看一下自己的css文件，有重复的代码片段都可以考虑使用混合器将他们提取出来复用。

@mixin border-radius{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color:red;
}
复制代码

混合器作用域内的属性都是return的值，除此之外，还可以为函数传参数。

@mixin get-border-radius($border-radius,$color){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
复制代码

也可以设置混合器的默认值。

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}
复制代码
5.2使用函数

使用函数的关键字为@include

.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius(10px,blue);   //传参
}
/*多个参数时，传参指定参数的名字，可以不用考虑传入的顺序*/
.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius($color:blue,$border-radius:10px);   //传参
}
复制代码

我们可能会想到，直接将混合器写成一个class不就行了，但是写成一个class的时候是需要在html文件中使用的，而使用混合器并不需要在html文件中使用class既可达到复用的效果。

tips:混合器中可以写一切scss代码。

6.继承

继承是面向对象语言的一大特点，可以大大降低代码量。

6.1定义被继承的样式
%border-style {
  border:1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

使用%定义一个被继承的样式，类似静态语言中的抽象类，他本身不起作用，只用于被其他人继承。

6.2继承样式

通过关键字@extend即可完成继承。

.container {
	@extend %border-style;
}
复制代码

上述例子中看不出混合器与继承之间的区别，那么下一个例子可以看出继承与混合器之间的区别。

.container {
	@extend %border-style;
	color:red;
}
.container1 {   //继承另一个选择器
	@extend .container;
}
复制代码

7.小结

通过本文的介绍，相信大家已经对SCSS有了一定的认知，但是光看是学不会的，我建议各位小伙伴要有强上的精神，先强行使用到目前正在做的项目中，熟悉一段时间，自然可以写出优质的SCSS代码。

8.其他

8.1操作符

SCSS提供了标准的算术运算符，例如+、-、*、/、%。

/*SCSS*/
width: 600px / 960px * 100%;
/*编译后的CSS*/
width: 62.5%;
复制代码

除此之外SCSS还有很多功能，各位小伙伴可以先将目前的知识运用熟练再去学习也不迟。

9.交流

如果这篇文章帮到你了，觉得不错的话来点个Star吧。 github.com/lizijie123

转载于:https://juejin.im/post/5cf488ea518825378867758f

weixin_34242819
关注
SCSS入门及使用技巧
wjianwei666的专栏
05-27 53
​​@extend​​的作用 就是将重复使用的样式延伸给包含这个样式的特殊样式。如果这个样式重复较多，我们可以将它定义为一个函数，如果使用的不是特别多，但是会使用到，就可以使用​​@extend​​来继承，这样就减少了代码的冗余。上面的样式中，​​.seriousError​​​选择器继承了​​.error​​选择器的所有属性，同时还定义了自己额外的属性。注意： 在定义变量时，​​$font-B​​​和 ​​$font_B​​是一样的含义，写在后面你的会覆盖前面的变量。
scss- 条件语句 循环语句使用
Ammy的成长
11-13 2879
@if @else if @else $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: ...
scss的常用技巧、循环、判断等
weixin_45932463的博客
03-27 1530
使用scss加强对样式的维护
scss语法
MISS_zhang_0110的博客
08-04 1897
SASS允许用户编写自己的函数。
scss-比较运算符
banchousuo6747的博客
10-29 491
　　与JavaScript类似，scss中也有比较运算符，下面就分别做一下介绍。 　　一、==相等和!=不相等运算符: 　　此运算符用来判断两个操作数是否相等。 　　特别说明: 　　上面两个运算符，支持类似于JavaScript严格类型比较(===)。 　　看如下代码实例: /*false*/ ("5" == 5) /*true (Libsass不支持)*/ (20...
scss基本语法---嵌套、循环、条件（@for,@if），混入@mixin，继承@extend，导入@import，
最新发布
I_am_shy的博客
07-22 699
scss是css预编译器，可以简化css代码的书写，并可以编译成css文件使用；
SCSS快速入门
陈行之的博客
02-25 186
1. 变量 1.1 命名规则 变量以$开头声明 $nav-color: #F90; nav { color: $nav-color; } //编译后 nav { color: #F90; } 1.2 变量名分割 变量名可以用下划线（_）或中划线（-）分割，且-和_可以互换。 // 变量名中含有下划线或中划线 $margin-left : 20px; div { margin-left : $margin_left; } // 编译后 div { margin-left : 20px
node.js中EJS 模板快速入门教程
10-19
EJS是一种在Node.js环境中广泛使用的模板引擎，其语法简单直观，允许开发者在HTML标签中嵌入JavaScript代码。EJS模板引擎是构建动态网页的理想选择，尤其是在使用Express框架时。... 首先，要开始使用EJS，需要先通过...
starterkit-scss:基于 scss 和指南针的网站的入门套件
07-04
本入门套件"starterkit-scss"就是针对使用SCSS和指南针进行网站开发而设计的，旨在帮助开发者快速上手SCSS，并利用指南针的强大功能提升工作效率。 ### SCSS核心特性 1. **变量（Variables）**：在SCSS中，你可以...
scss语法入门
热门推荐
jiang_fulai的博客
04-28 1万+
自学文档 自学文档 scss自学 scss引入其他文件 scss注释方法 scss变量 嵌套 混合 继承 站位选择器 函数 其他功能 scss 是 sass3的新版本，也是目前推荐的语法，以.scss结尾的文件 所以 scss == sass3最新版本，目前就使用scss。 scss自学 scss引入其他文件 引入其他 .scss 文件 ...
Sass的控制命令（判断、循环）
YYece的博客
06-01 3763
Sass中控制命令指的是@if、@each、@for和@while。具有一定的逻辑判断和循环遍历能力，这个对于懂JavaScript或者后端语言的同学来说一点都不难。但在CSS中是不可思议的一件事情，最起码到目前为止是不太可能的事情。但在Sass这样的CSS预处理器语言中实现了。 @if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else
SCSS的基本使用
接着奏乐接着舞的博客
07-15 1513
scss的简单使用。 官方文档：https://www.sass.hk/
css简析
low666的博客
05-12 1778
css选择器 标签选择器：针对一类标签（如：body,div,p,ul,li） ID选择器：针对某一个特定的标签使用（如：id=“demo”） 类选择器：针对你想要的所有标签使用（如：class=“demo”） 通用选择器（通配符）：针对所有的标签都适用（如：*号） 后代选择器（继承选择器）：用空格隔开（如：div p,注意两选择器用空格键分开） 交集选择器（组合选择器）：（如：.head .head_logo,注意两选择器用空格键分开）。 并集选择器：（群组选择器）：用逗号隔开 伪类选择器：（如：就是链
Vue 的样式绑定和 Sass 快速入门 （七）
d2235405415的博客
03-21 2912
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因此，在将`v-bind`用于class 和style时，Vue 做了专门的增强。本章将对此做详细的说明并额外推荐在项目中使用`Sass`提升样式的编码效率
Scss，Sass之@if，@for
spring mongodb maven
01-06 958
Scss的强大毋庸置疑，而且传统的css编写也是让人头疼。 Scss拥有强大的去重思想，css样式往往会产生大量的重复性代码 Scss可以定义变量 Scss可以进行数学运算 Scss可以进行条件判断 Scss可以进行循环 Scss具有良好的结构特性 代码段.total-vote-container { width: 2304px; height: 960px; backgro
Sass 条件语句
天空之外
12-29 1951
本节我们来学习 Sass 中的条件语句，可以使用 @if 指令来判断条件表达式的值，然后控制输出。Sass 中的 @if、@else 等指令和 JS 中的 if/else 类似。 @if 指令 当 @if 指令后面的表达式返回值为 true 时，输出花括号中的代码，为 false 则不输出。 示例： 下面例子中，定义了一个变量 $num，使用 @if 指令来判断变量的值，当变量值为 1 时，输出字体颜色为 #ee78da，当变量值为 2 时，输出字体颜色为 #65e3e7： $num:1; h3{
Scss使用（css预处理器）
qq_45256497的博客
06-19 500
scss的用法
前端Scss常见语法记录
老梅的博客
09-22 849
1. sass与scss区别 SCSS 需要使用分号和花括号。 sass举例： #sidebar width: 30% background-color: #faa scss举例： #sidebar { width: 30%; background-color: #faa; } 2. 变量（具有作用域） 以**$** 开头，后为变量名； $r......
boostrap快速入门
09-10
你好！关于Bootstrap快速入门，我可以为您提供一些基本信息。 Bootstrap是一个流行的前端开发框架，它使用HTML、CSS和JavaScript来构建响应式和移动设备优先的网站和应用程序。以下是一些快速入门步骤： 1. 下载Bootstrap：您可以从Bootstrap官方网站（https://getbootstrap.com）下载最新版本的Bootstrap。您可以选择下载编译后的CSS和JavaScript文件，或者使用Sass、Less、SCSS等源代码。 2. 引入Bootstrap：将下载的Bootstrap文件解压缩后，将CSS和JavaScript文件复制到您的项目文件夹中。在HTML文件的`<head>`部分引入Bootstrap的CSS文件，如下所示： ```html <link rel="stylesheet" href="path/to/bootstrap.css"> ``` 3. 添加JavaScript依赖项：在HTML文件中，将Bootstrap的JavaScript文件引入到`<body>`的尾部，以确保它们在页面加载时可用： ```html <script src="path/to/bootstrap.js"></script> ``` 4. 使用Bootstrap组件：现在您可以开始使用Bootstrap的各种组件来构建您的页面。Bootstrap提供了许多常用组件，如导航栏、按钮、表格、表单等。通过查阅Bootstrap文档，您可以了解每个组件的使用方法和选项。 5. 响应式布局：Bootstrap还提供了用于创建响应式布局的网格系统。您可以使用预定义的栅格类将页面划分为不同的列和行，以适应不同的屏幕尺寸。 以上是Bootstrap快速入门的基本步骤。通过阅读Bootstrap文档并实践使用各种组件，您将能够更深入地掌握Bootstrap的功能和用法。祝您使用Bootstrap开发出漂亮的网站和应用程序！如有更多疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值