SCSS 的基本使用

作者:神秘网友发布时间:2021-02-23 13:56:06

SCSS 的基本使用

现在最常用的 CSS 处理器有 Less，Sass。本人比较常用Sass，选择什么看自己，主要数为了提高开发效率。今天就将一些基本用法在这里分享给大家，有不足的希望在评论区里补充哦~

首先，用一句话说明 Sass、Scss的关系：Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性。

然后，我们来看怎么使用呢像日常一样，需要安装npm 包再使用哦：cnpm i -S node-sass sass-loader，当然这里你是用npm 、yarn 安装都是可以的！

我们一般在组件中这样使用，在 style 标签上加 lang="scss" 这样就style 里需要支持 scss 语法。

style lang="scss" scoped
  ...        
/style

好啦，到这里我们就可以开始使用 scss 的魔法啦~

嵌套

选择器嵌套例如pspan{color:#fff;}

p{
       span {
           color:#fff;
       }
 }

属性嵌套例如：p{font-size:16px}

 p{
        font: {
            size: 16px;
        }
    }

：在嵌套的代码块内，使用引用父元素例如：a:hover{color:#ddd}
```
a{
        :hover{
            color: #ddd;
        }   
    }
```

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

$global-bg:#7a7a7a;
    a{
        :hover{
            color: $global-bg;
        }   
    }

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;

.rounded {
　　 border-#{$side}-radius: 5px;
}

继承：SASS允许一个选择器，继承另一个选择器，class2要继承class1，就要使用@extend命令：

.class1 {
　　　　border: 1px solid #ddd;
　　}
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

混入 @mixin @include

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

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用@include命令，调用这个mixin。

div {
　　　　@include left(20px);
　　}

引入 @import 、Partials
- @import命令，用来插入外部文件。
```
@import "path/filename.scss";
```
- 如果插入的是.css文件，则等同于css的import命令。
```
@import "foo.css";
```
- 文件名前添加下划线，这样会告诉 Sass 不要编译这些文件。例如，将文件命名为_color.scss，便不会编译成_color.css文件。但导入语句中却不需要添加下划线（注意，不可以同时存在添加下划线与未添加下划线的同名文件，否则添加下划线的文件将会被忽略。）

+、-、*、/、%：SASS允许在代码中使用算式

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

! default !global
- !default 变量的默认值，如果未被重新赋值
- !global 将变量提升为全局变量

条件语句 @if @if else @else

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

    @if lightness($color)  30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

循环语句 @for @while @each

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

$i: 6;
@while $i  0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

@for 的使用方法：

@for $i from start through end （包括end 这个数）

@for $i from start to end （不包括end 这个数）

1. $i 表示变量
2. start 表示起始值
3. end 表示结束值

自定义函数 @function

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}

颜色函数：SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

SCSS 的基本使用相关文章

Oracle扩容表空间
1、现使用表空间查询 SELECT TABLESPACE_NAME "表空间", To_char(Round(BYTES / 1024, 2), '99990.00') || '' "实有", To_char(Round(FREE / 1024, 2), '99990.00') || 'G' "现有", To_char(Round(( BYTES - FREE ) / 1024, 2), '99990.00') || 'G' "使用",
使用scrapy框架，做抓取某短视频里面发布的视频的观看次数、点赞等信息的工程！
本文仅供学习与交流，切勿用于非法用途！！！第一部分分析：第二部分实现该工程代码：这里使用: scrapy startproject ProName cd ProName scrapy ganspider spiderName www.xxx.com 创建scrapy工程和爬虫文件. 创建好scrapy工程后，在配置文件settings.
java.util包下 Calendar， Timer， TimerTask的简单使用
Carlendar类实例，set方法非常灵活，可以方便地设定一个时间。 Calendar calendar = Calendar.getInstance(); //分别是年月日时分秒，月份是从0月开始，12月就是11 calendar.set(2020,0,1,18,24,05); Date time = calendar.getTime(); System.out.printl
分析一下函数指针的使用
线程池代码中存在一段结构体初始化的设计： /* all tasks in the linked list recalled function for task*/typedef struct worker{ void *(*process) (void *arg); /*recalled function*/ void *arg; struct worker *next;} CThread_worker; 看最基本的定义
LINQ教程一：LINQ简介
一、为什么要使用LINQ 要理解为什么使用LINQ，先来看下面一个例子。假设有一个整数类型的数组，找到里面的偶数并进行降序排序。在C#2.0以前，如果要实现这样的功能，我们必须使用'foreach'或'for'循环来遍历数组，先找到偶数然后在降序排序，相关代码如下：
Tesseract-OCR使用有感
这玩意儿就只有一个Tesseract.dll 就算有其它的加上x64目录下的另外两个dllleptonica-1.80.0.dlltesseract41.dll也不过几兆而已，但是但是但是加上字库文件可就大了几十兆。也充分说明了这玩意儿跟我原先说的一样的主要在于字库的匹配。如果只识别数字
一、在 HTML 中使用 JavaScript
一、script 标签的使用方式直接在标签中写入代码 script function sayHi() { console.log("Hi"); } function sayScript() { console.log("\/script"); // 特殊字符需要转义，"\" } sayHi(); sayScript();/script 引入外部 js 文件 script src="./js/sayHell
云原生项目实践DevOps(GitOps)+K8S+BPF+SRE，从0到1使用Golang开发生产级麻将游戏服务器—第6篇
图解 Manager 游戏逻辑组件系列文章 Golang开发生产级麻将游戏服务器—第1篇 Golang开发生产级麻将游戏服务器—第2篇 Golang开发生产级麻将游戏服务器—第3篇 Golang开发生产级麻将游戏服务器—第4篇 Golang开发生产级麻将游戏服务器—第5篇介绍这将是一
了解 Vue 中混入 mixin 的使用
子曰：万里之行，始于足下。环境 OS: windows 10 应用：Vuejs + Android 壳的 hybrid app 应用 IDE： Visual Studio Code 问题在最近的 hybrid app 项目中，有一个需求是需要使用 aliyun 的 oss 进行对 pdf、txt、word、xlsx 的预览，而图片、视频则需要在
【大家的项目】Maya 中使用 Rust
Maya PolyNoise 用 Rust 在 Maya 中实现 PolyNoise 的小案例性能对比 Python: 0.6s Rust: 0.04s C++: 0.04s 需要 Rust = 1.49 (nightly) Maya = 2016 pip 安装首先克隆代码，并 cd 到代码目录 mayapy -m pip install -r requirements.txt mayapy setup.py i

SCSS 的基本使用

SCSS 的基本使用

SCSS 的基本使用 相关文章

SCSS 的基本使用相关文章