526互联

scss 常用操作

发布时间 2023-07-10 16:56:16作者: 到此灬一游丿

scss 使用说明

1、变量声明 variables

$my-color: #1269b5; // 定义变量
$my-border: 1px solid $my-color; // 变量中也可以使用变量
div.box {
  background: $my-color;
}
h1 {
  border: $my-border;
}

2 、嵌套 nesting

1.嵌套内容

.nav {
  height: 100px;
  ul {
    line-style: none;
    a {
      display: block;
      color: #000;
      //注意 & 是拼接属性，
      &:hover {
        //正常使用：编译 .nav ul a:hover{}
        background: #0d2f7e;
      }
      :hover {
        //错误使用：编译 .nav ul a :hover{}
        background: #0d2f7e;
      }
    }
  }
  & &-text {
    //拼接  编译 .nav .nav-text{}
    font-size: 25px;
  }
}

2、嵌套属性

编译前

body {
  font： {
    family: Helvetice, Arial, sans-serif;
    size: 20px;
    weight: bolder;
  }
}
.nav {
  border: 1px solid #ccc {
    left: 0;
    right: 0;
  }
}

编译后

body {
  font-family: Helvetice, Arial, sans-serif;
  font-size: 20px;
  font-weight: bolder;
}
.nav {
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
}

3、Mixins 混入

@mixin 声明 ，@include 调用

编译前

@mixin alert($text-color, $back-color) {
  background: $back-color;
  span {
    color: $text-color;
  }
}
.alert-warning {
  @include alert(#000, #fff); //$text-color:#000;, $back-color:#fff;
}
.alert-info {
  @include alert(
    $back-color: #d9edf7,
    $text-color: #245269
  ); //也可以用具名的方式传参
}

编译后

.alert-warning {
  background: #fff;
}
.alert-warning span {
  color: #000;
}
.alert-info {
  background: #d9edf7;
}
.alert-info span {
  color: #245269;
}

4、继承/扩展 inheritance

@extend 继承

注意：@extend 会继承（被继承对象所有属性和与他相关的其他属性）

编译前

.alert {
  paddding: 15px;
}
.alert a {
  font-weight: bolder;
}
.alert-info {
  @extend .alert; //继承
  background: #d9edf7;
}

编译后

.alert,
.alert-info {
  padding: 15px;
}
.alert a,
.alert-info a {
  font-weight: bolder;
}
.alert-info {
  background: #d9edf7;
}

5、@import 导入

在 **CSS** 中就自带 @import 导入功能，但是每次使用@import 浏览器都会发起一次新的 http 请求 这样会消耗 http 资源，会慢一些。

scss 扩展了@import 功能 编译的时候会把导入的文件编译到当前的文件中，从而减少 http 请求。

编译前

// _base.scss
body {
  margin: 0;
  padding: 0;
}

// style.scss
@import "base" .alert {
  paddding: 15px;
}
.alert a {
  font-weight: bolder;
}
.alert-info {
  @extend .alert; //继承
  background: #d9edf7;
}

编译后

body {
  margin: 0;
  padding: 0;
}
.alert,
.alert-info {
  padding: 15px;
}
.alert a,
.alert-info a {
  font-weight: bolder;
}
.alert-info {
  background: #d9edf7;
}

6、类型

scss 属性有很多种数据类型 type-of();可以判断类型

$ sass -i
>> type-of(5)
"number"
>> type-of(5px)
"number"
>> type-of(hello)
"string"
>> type-of("hello")
"string"
>> type-of(1px solid #000)
"list"
>> type-of(1px 2px)
"list"
>> type-of(red)
"color"
>> type-of(#000)
"color"
>> type-of(rgb(200,102,10))
"color"
>> type-of(hsl(0,100%,50%))
"color"

数字函数

abs() //绝对值

round() //四舍五入

ceil(3.1) //进位 4

floor(3.6) //退位 3

percentage(65px / 100px) //百分位 65%

min(1px,5px,10px) //最小值 1px

max(1px,5px,10px) //最大值 10px

字符串函数

$ sass -i
>> @greeting:"Hello nihao" //声明 @greeting 变量的值为 "Hello nihao"
"Hello nihao"
>> to-upper-case(@greeting) // 字符串转大写
"HELLO NIHAO"
>> to-lower-case(@greeting) // 字符串转小写
"hello nihao"
>> str-length(@greeting) //字符串长度
11
>> str-index(@greeting,"Hello") //字符串在变量@greeting 的位置  位置是从0开始的
1
>> str-insert(@greeting,".net",12) //将字符串插入到变量@greeting 位置为12的地方
"Hello nihao.net"

列表函数

$ sass -i
>> @greeting:5px 10px //声明 @greeting 变量的值为 列表 5px 10px
（5px 10px）
>> length(@greeting) // 列表长度
2
>> nth(@greeting,1) // 返回列表中位置为1的属性
5px
>> index(@greeting,10px) //属性在列表中的位置
2
>> append(@greeting,5px) //列表添加属性
（5px 10px 5px）
>> join(@greeting,5px 10px) //合并列表
（5px 10px 5px 5px 10px）
>> zip(1px 5px 10px,solid solid solid ,green blue red) //将多个列表值转成一个多维列表
((1px solid green),(5px solid blue),(10px solid red))

MAP 函数

$ sass -i
>> @colors:(light:#ffffff,dark:#000000 ) //声明 @color map变量
(light:#ffffff,dark:#000000 )
>> length(@colors) // map表长度
2
>> map-get(@colors,dark) // 获取map key为dark的值
#000000
>> map-keys(@colors) //获取$colors的key
（"light","dark"）
>> map-values(@colors) //获取$colors的值
（#ffffff,#000000）
>> map-has-key(@colors,light) //判断map 属性@colors 是否存在key为light
true
>> @colors：map-merge(@colors,(light-gray:#e5e5e5)) //添加属性
(light:#ffffff,dark:#000000,light-gray:#e5e5e5 )
>> map-remove(@colors,light,dark) //删除属性
(light-gray:#e5e5e5 )

颜色函数

HSL(色相,饱和度,明度)

调整色像值 adjust-hue

编译前

$base-color: #ff0000;
$base-color-hsl: hsl(0, 100, 50%);
body {
  background: adjust-hue($base-color, 137deg);
}

编译后

body {
  background: #00ff48;
}

调整明度值 增加明度 lighten 减少明度 draken

编译前

$base-color: hsl(222, 100%, 50%);
$light-color: lighten($base-color, 30%); //亮度增加30%
$dark-color: draken($base-color, 20%); //亮度减少20%
.alert {
  border: 1px solid $base-color;
  background: $light-color;
  color: $dark-color;
}

编译后

.alert {
  border: 1px solid #004cff;
  background: #99b8ff;
  color: #002e99;
}

调整饱和度 增加饱和度 saturate 减少饱和度 desaturate

编译前

$base-color: hsl(222, 50%, 50%);
$saturate-color: saturate($base-color, 50%); //饱和度增加50%
$desaturate-color: desaturate($base-color, 30%); //饱和度减少30%
.alert {
  background: $saturate-color;
}
.alert-info {
  background: $desaturate-color;
}

编译后

.alert {
  background: #0051ff;
}
.alert-info {
  background: #667699;
}

Interpolation 可以把一个值插入到另一个值身上

#{}

编译前

$version: "0.0.1";
/* 项目当前的版本号是 ： #{$version} */
$name: "info";
$attr: "border";
.alert-#{$name} {
  #{$attr}-color: #ccc;
}

编译后

@charset "UTF-8"
/* 项目当前的版本号是:0.0.1 */
.alert-info {
  border-color: #ccc;
}

控制指令

@if

@error @warn

$colors: (light:#ffffff,dark:#000000);
@function color($key){
  @if not map-has-key(@colors,$key) { //如果触发这个条件会在控制台打印信息
    @warn "在 $colors 里没找到#{$key} 这个 key";
  }
  @return map-get($colors,$key)
}
body {
  background-color:color(left);
}
普通的使用方式

编译前

$use-prefixes: true;
$theme: "light";
body {
  @if @theme == dark {
    background: black;
  } @else if @theme == light {
    background: white;
  } @else {
    background: grey;
  }
}
.rounded {
  @if $use-prefixes {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }
  border-radius: 5px;
}

编译后

body {
  background: white;
}
.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
三元条件使用方式

编译前

$theme: "dark";

.content {
  color: if($theme =='light',#000,#FFF );
}

编译后

.content {
  color: #FFF ;
}

@for

 @for $var from <开始值> through <结束值> { //包含结束值
    ...
 }
 @for $var from <开始值> to <结束值> { //不包含结束值
    ...
 }

through 使用 编译前

$columns: 4;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: 100% / $columns * $i;
  }
}

through 使用 编译后

.col-1 {
  width: 25%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 75%;
}
.col-4 {
  width: 100%;
}

@each 遍历列表

 @each $var in $list {
    ...
 }

编译前

$icons: success error warning;
@each $icon in $icons {
  .col-#{$icon} {
    background-image: url(../icons/#{$icon}.png);
  }
}

编译后

.col-success {
  background-image: url(../icons/success.png);
}
.col-error {
  background-image: url(../icons/error.png);
}
.col-warning {
  background-image: url(../icons/warning.png);
}

@while 遍历

 @while $var in $list {
    ...
 }

编译前

$icons: success error warning;
@each $icon in $icons {
  .col-#{$icon} {
    background-image: url(../icons/#{$icon}.png);
  }
}

编译后

.col-success {
  background-image: url(../icons/success.png);
}
.col-error {
  background-image: url(../icons/error.png);
}
.col-warning {
  background-image: url(../icons/warning.png);
}

@function 和 @return

@return只允许在@function 中使用，而且必须以@return结束。当遇到@return时，会立即结束函数并返回其结果

参数固定

编译前

// percentage 是内置的转百分之比函数

@function row-cols-width($column) {
  @return percentage(1/$column);
}
@for $i from 1 through 6 {
  .row-cols-#{$i} {
    width :row-cols-width($i);
  }
}

编译后

.row-cols-1 {
    width :100%;
  }
.row-cols-2 {
    width :50%;
}
.row-cols-3 {
    width :33.33333%;
}  
.row-cols-4 {
    width :25%;
}
.row-cols-5 {
    width :20%;
}
.row-cols-6 {
    width :16.666667%;
}
参数不固定 灵活的参数 使用...

编译前

// percentage 是内置的转百分之比函数

@function background-linear-gradient($direction,$gradients...) {
  @return linear-gradient($direction,$gradients...);
}
body{
  background-image: background-linear-gradient(to left,red,green,blue); 
}

编译后

body{
  background-image: linear-gradient(to left,red,green,blue); 
}

@at-root 跳出嵌套

编译前

.parent{
  font-size:20px;
  @at-root{
    .child-1{
      font-size:12px;
    }
    .child-2{
      font-size:12px;
    }
    .child-3{
      font-size:12px;
    }
  }
}

编译后

.parent{
  font-size:20px; 
}
.child-1{
  font-size:12px;
}
.child-2{
  font-size:12px;
}
.child-3{
  font-size:12px;
}