css预处理器之scss

作者: 渚清与沙白 | 来源:发表于2023-10-22 17:39 被阅读0次

vite.config.ts配置全局scss
sass是什么？为什么要使用sass?使用sass，以及其他一些
scss
web开发小部分单词
CSS 预处理的区别的深度比较 - Stylus/Sass/Le
Sass学习笔记1 - 基础篇
vue 使用less或scss
基于vue-cli3，全局集成 scss | sass
技术探讨分享（React，Scss，antd）
webpack入门进阶（4）

选择器嵌套
嵌套为父子关系

.container{
  .top{
    color: red;
  }
}

父选择器 &

.container {
  .top {
    font-size: 14px;
    &-left {
      color: red;
    }
  }
}
// 等价于
.container {
  .top {
    font-size: 14px;
  }
  .top-left {
      color: red;
  }
}

属性嵌套

.container {
  a {
    color: red;
    font: {
      size: 10px;
      weight: bold;
      family: sans-serif
    }
  }
}
// 等价于
.container {
  a {
    color: red;
    font-size: 10px;
    font-weight: bold;
    font-family: sans-serif;
    }
  }
}

占位符选择器 %
必须通过 @extend 使用

.button%base {
  width: 100%;
  height: 48px;
}
.button-default {
  @extent %base;
  color:white;
}
.button-success {
  @extent %base;
  color:green;
}

注释

// ：单行注释
多行注释
/*

*/

变量

css变量
定义：--变量名
使用：var(--变量名)

body {
    --color:red;
}
p{
    color: var(--color);
}

scss变量
定义：$变量名
使用：$变量名

变量名中使用的连接符-和下划线_是等效的，会视为同一个变量。如 $border-color 和 $border_color是同一个变量。

$color:white;
p {
    color: $color;
}

变量作用域

局部变量

.container{
    $color:#333;
    p {
        color: $color;
    }
}

全局变量

定义在外部

$color:white; 
p {
    color: $color;
}

使用 !global

.container{
    $color:#333 !global;
    p {
        color: $color;
    }
}

定义私有变量变量名以-或_开头
$-font-size:10px;
$_font-size:10px;

变量值类型
数值、字符串（有引号、无引号）、颜色、布尔值、空值（null）、数组（逗号或空格作分隔符）、maps

// 定义变量并赋值
$mode:true;
$var:null;
$color-map:(color1: #f00,color2: #ff0,color3: #f0f);

// type-of()|length()|map-get()均是函数
.container {
    // 条件判断
    @if $mode {
        color: aqua;
    }
    @else {
        color: azure;
    }
    content: type-of($var);
    content: length($var);
    color: map-get($map: $color-map, $key: color1);
}

默认值!default

// 已经定义了变量color
$color: #666;
// 如果前面没有定义color，则使用默认值
$color: #999 !default;
.container{
    color: $color; // 前面已经定义color，则这里的值是 #666；如果没有定义，这里的值是 #999
}

导入`@import`

css导入文件
@import url(a.css);
scss导入
@import 'a'
注意：文件扩展名是.css、文件名以http://开头、文件名是url()、@import包含media queries都会视为css导入。

混入`@mixin`

定义：@mixin
使用：@include

// 传参混入，支持多参数，可指定默认值($hei:0)
@mixin block($hei) {
    width: 50%;
    margin: 15px;
    height: $hei;
    // 嵌入方式
    .warn {
        color: #999;
    }
}
.container {
    @include block($hei: 10px); //指定参数传参，也可不指定参数传参
    @include warn; //无参，无需传参
}

混入声明参数：支持无参、单个参数、多个参数、可变参数(...)
混入传参：支持依次传参、指定传参、可变参数传参

可变参数传参

@mixin linear-gradient($direction,$gradient...){
    //传参$gradient中的第一个参数值
    background-color: nth($list: gradient, $n: 1); 
    background-image: linear-gradient($direction,$gradient);
}
.container {
    @include linear-gradient(to right, #f00,#666,#999); // $gradient 可以传递无固定数量个参数
}

继承`@extend`

多继承

.base {
    color: #666;
}
.normal {
    font-size: 14px;
}
.text{
    @extend .base;
    @extend .normal
}

多重继承

.base {
    color: #666;
}
.normal {
    @extend .base;
    font-size: 14px;
}
.text{
    @extend .normal
}

占位符选择器
以%开头，用于扩展其他选择器，占位符选择器不会被编译成最终的css。

%base {
    color: #666;
}
.normal {
    @extend %base;
    font-size: 14px;
}

运算符

等号操作符 ==、!=

$theme:"red";
.container {
    @if $theme == "red" {
        background-color: #666;
    }
    @else {
        background-color: #f0f;
    }
}

比较运算符 < (lt)、> (gt)、<= (lte)、>= (gte)

$theme:10;
.container {
    @if $theme > 5 { // > 符合可以写成 gt
        background-color: #666;
    }
    @else {
        background-color: #f0f;
    }
}

逻辑运算符 and、or、not

$width: 50;
$height: 80;
$last: false;
$index:8;
.container {
    @if $width>50 and height>50 {
        background-color: #666;
    }
    @else {
        background-color: #f0f;
    }
    @if not $last {

    }
    @else {
        
    }
    @if not($index > 5){

    }
    @else{

    }
}

数字操作符 +、-、*、/、%
数字类型：数字、百分号、单位(px、pt、in)
除法使用需要符合三个条件才可进行合法运算
1. 值是变量或者函数的返回值
2. 值被圆括号包裹
3. 值是算数表达式的一部分

$width: 100;
.container {
    width: 50 + 20;// 70
    width: 50 + 20%;// 70%
    width: 50% + 20%;// 70%
    width: 50 + 20px;// 70px
    width: 50px + 20px;// 70px
    width: 10px + 10pt;// 23.33333px
    width: 50px + 20%;// 错误用法

    width: 50% * 10%;// 错误用法
    width: 5px * 10px;// 错误用法
    width: 5% * 10;// 50%
    width: 5px * 10;// 50px

    width: round($number: 10) / 2;// 5  函数返回值计算
    width: (100px / 2);// 50px  圆括号计算
    width: 50px + 8px / 2;// 54px 表达式计算
    width: $width / 10;// 10 变量计算

    width: 10 % 5;// 取模值为 0
    width: 50 % 3px;// 2px
    width: 50px % 3px;// 2px
    width: 50% % 7;// 1%
    width: 50% % 9%;// 5%
    width: 50% % 10px;// 错误用法
}

插值语法

分隔符 `/`

p {
    font: 14px/50px Helvetical;// 14px：字体大小  50px：行高
}

插值语法 `#{}`

运用范围：选择器、属性名、属性值、注释

$size:14px;
$line-height:50px;
$author: "渚清与沙白";
$cl-name: container;
$attrs: color;
/*
@auther:  #{$auther}
*/

p {
    font: #{$size} / #{$line-height} Helvetical;
    .#{$cl-name}{
        #{$color}: white;
    }
}

函数

color 颜色函数
lighten()、 darken()、opacify()
字符串函数
quote()、 unquote、 str-length
Math函数
abs 、cell max、 random
List函数
length、 nth index、 append
Map函数
map-get、 map-has-key、 map-keys、 map-values、percentage
Selector选择器函数
selector-append、 selector-unify
自检函数
variable-exists、mixin-esists

流程控制指令

@if{} @else if {}@esle{}
@for
有2种写法,@for $i from <start> to <end>和@for $i from <start> through <end>
throuh：条件范围包含start和end
to：条件范围包含start，不包含end
$i: 是一个变量

// 生成3个样式
@for $i from 1 to 4 {
    .p#{$i}{
        width: 10px * $i;
        height: 20px;
    }
}
// 生成4个样式
@for $i from 1 through 4 {
    .p#{$i}{
        width: 10px * $i;
        height: 20px;
    }
}

@each
写法：@each $i in <list>
@while

$column: 12;
@while $column > 0 {
    .col-sm-#{$column}{
        // width: $column / 12 * 100%;
        // width: $column / 12 * 100#{"%"};
        width: unquote($string: $column /12 * 100 +"%");
    }
    $column: $column - 1;
}

自定义函数`@function`

函数的定义

@function function-name([$param1,$param2,...]){
    ...
    @return $value;
}

函数使用：直接调用函数并传参
传参方式：

@function bg-linear-geadient($direction,$start-color,$end-color:#666){
    @return linear-gradient($direction,$start-color,$end-color);
}

// 正常传参
body{
    background-color: bg-linear-geadient(to right, green, red);
}
// 省去默认值
body{
    background-color: bg-linear-geadient(to right, green);
}
// 按照key进行传参
body{
    background-color: bg-linear-geadient($start-color: red,$direction: to right);
}

可变参数声明及传递

// 可变参数声明  ...
@function bg-linear-geadient($direction,$gradient...){
    @return linear-gradient($direction,$gradient);
}
body {
    background-color: bg-linear-geadient(to right, green,red,blue);// 传参
}
// 传递可变参数 ...
$width:50px,
40px,
20px;
.center{
    width: min($width...);// 传参
}

三元条件函数 `if`

if的使用

$theme: 'light';
.container{
    color: if($theme == 'light',red,green);// 条件 ? true:false
}

@use

从其他scss样式表中加载mixin、extend和变量。
@use加载的样式被称为模块，多次引入只包含一次，可以看着是@import的增强。
语法：@use '<url>' as [alias|namespace]

@use与@import的区别
@use重复引入只会生成一份；@import重复引入，会生成多份
@use有模块的功能

@use 'common' as common;
body{
    font-size: common.$font-size;
    @include common.base(#ff0);
}

@use引入的文件都是一个模块，默认以文件名作为模块名，可以通过as alias取别名
@use多次引入同一个文件，不会重复引入，而@import会重复引入
@use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而@import变量会被覆盖
@use可以通过*来取消命名空间，建议不要这样做
@use模块内可以通过 $-或$ _来定义私有成员，不会被引入
@use模块内变量可以通过!default定义默认值，引入时可以通过with(...)的方式修改
可以定义-index.css或_index.scss来合并多个scss文件，它@use默认加载文件

@forward

在@use使用中，通常会在_index.scss文件中将样式进行合并转发，这些变量、混入、函数只能在_index.scss文件中使用。在引入了_index.scss的文件中是没有办法直接使用那些变量、混入和函数。为了能够直接使用变量、混入、函数，于是就有了@forward。
作用：通过@forward加载一个模块的成员，并将这些成员当着自己的成员对外暴露出去，通常用于跨多个文件组件Sass库。

选择性转发@forward....show....、@forward....hide....

// bootstrap.scss
// as c-* : 定义前缀
@forward 'common' as c-* hide bgColor with($font-size:30px !default);
@forward 'global' as g-*;

// use.scss
@use './bootstrap' with($c-font-size:80px);
body{
    font-size: bootstrap.$c-font-size;
    @include bootstrap.g-base(#f00)
}

@at-root

可以使被嵌套的选择器或属性跳出嵌套

.parent{
    font-size: 14px;
    @at-root.child{
        font-size: 18px;
        @at-root.son{
            font-size: 20px;
        }
    }
}

.parent{
    font-size: 14px;
    @at-root{
        .child{
            font-size: 18px;
            
        }
        .son{
            font-size: 20px;
        }
    }
}

// & 跳出嵌套
.foo{
    .bar & {
        font-size: 14px;
    }
}

@at-root (without:type)
@at-root (with:type)
type取值
all：表示所有
rule：表示常规css
media：表示media
supports：表示supports

vite.config.ts配置全局scss
vite.config.ts配置全局scss global.scss: helloPage.vue: CSS 预处...
sass是什么？为什么要使用sass?使用sass，以及其他一些
什么是scss？ Sass属于CSS预处理器，那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，...
scss
1、什么是scss？ scss是css的预处理器，css是标记语言，不可以定义变量、封装、引用等。 2、...
web开发小部分单词
Sass=scss编程 Sass 是css预处理器 css预处理器用编程思维写一些可以转成css的东西优点：更加...
CSS 预处理的区别的深度比较 - Stylus/Sass/Le
CSS Preprocess Different 在前端界，有三大 CSS 预处理器，分别是 SASS(SCSS)...
Sass学习笔记1 - 基础篇
CSS预处理器 —— Sass学习笔记（基础）参考 scss官网 SCSS 里的数组及其遍历 https://b...
vue 使用less或scss
less，scss和stylus都是css的预处理器，首先我们要明白我们为什么要使用less，scss和stylu...
基于vue-cli3，全局集成 scss | sass
Css的预处理器如果项目中没有scss预处理器，需要安装修改配置文件 vue.config.js
技术探讨分享（React，Scss，antd）
SassScss是Sass（css预处理器）的最新语法特性。[https://www.sass.hk/]Scss特...
webpack入门进阶（4）
1.11.预处理器文件处理 #1.sass文件 sass这种css预处理器是以.scss结尾，需要用node-sa...

css预处理器之scss

注释

变量

导入`@import`

混入`@mixin`

继承`@extend`

运算符

插值语法

分隔符 `/`

插值语法 `#{}`

函数

流程控制指令

自定义函数`@function`

三元条件函数 `if`

@use

@forward

转发

@at-root

相关文章

vite.config.ts配置全局scss

sass是什么？为什么要使用sass?使用sass，以及其他一些

scss

web开发小部分单词

CSS 预处理的区别的深度比较 - Stylus/Sass/Le

Sass学习笔记1 - 基础篇

vue 使用less或scss

基于vue-cli3，全局集成 scss | sass

技术探讨分享（React，Scss，antd）

webpack入门进阶（4）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

css预处理器之scss

注释

变量

导入@import

混入@mixin

继承@extend

运算符

插值语法

分隔符 /

插值语法 #{}

函数

流程控制指令

自定义函数@function

三元条件函数 if

@use

@forward

转发

@at-root

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

导入`@import`

混入`@mixin`

继承`@extend`

分隔符 `/`

插值语法 `#{}`

自定义函数`@function`

三元条件函数 `if`