关于Sass

最新推荐文章于 2024-06-12 23:58:32 发布

巨龙王

最新推荐文章于 2024-06-12 23:58:32 发布

阅读量231

点赞数

分类专栏： css 文章标签： sass css css3

本文链接：https://blog.csdn.net/qq_45812558/article/details/123447112

版权

Sass是一种CSS预处理语言，提供嵌套规则、变量、混合、导入等功能，增强了CSS的编写效率和组织性。本文介绍了Sass的安装、基础语法，包括变量、数据类型、运算、继承、嵌套、条件控制语句和内置函数等核心概念。

摘要由CSDN通过智能技术生成

Sass

世界上最成熟最稳定最强大的专业级CSS扩展语言
CSS的预处理工具
.sass .scss预处理后缀

一、帮助我们解决的问题

1.嵌套规则

通过花括号的方式解决复杂的css父子样式嵌套问题

2.变量规则

通过变量将公共样式抽离,减少冗余css代码

3.条件逻辑

像高级语言一样编写逻辑性的css代码

二、Sass安装

sass中文网 ruby3.x安装

按照安装步骤进行安装即可

在vscode中 F1输入live sass:watch sass

三、基础语法

3.1 sass变量和引用

3.1.1 定义变量要用$开头

   $width:300px;
   $height:300px;
   $color: blue;
   
   .div1{
       width:$width;
       height:$height;    
       background-color:$color;
   }
   $xxx:200px !default;//后续相同变量都会把他的值覆盖

3.1.2 差值变量的链接 #{ }

(1).对于img

 $str:'xxx.jpg';
 
 .div2{
     background-image:url('./img/#{$str}');//转  css中就是./img/xxx.jpg
 }

(2).对于类

 $class:'.div';
 $styleKey:'height';
 $width:300px;
 $height:300px;
 
 #{$class}{
     width:$width;
     $styleKey:$height;
 }

 //转到css中就是
 .div{
     width:300px;
     height:300px;
 }

3.2 Sass中的import

1.原本的demo.css
在scss中@import ‘demo.css’，那么在scss中不会对demo.css编译，在生成的css中会转义成@import url(demo.css)

2.@import的引用在不同位置有不同的影响，如果不想把原本的css受到影响，就要在原生的demos.css中的变量尾部输入 !defalut来默认变量

四、基本数据类型

4.1 number类型

  $width:300px;
  $zoomValue:2;
  
  .div{
  width:$width;
  height:$width;
  zoom:$zoomValue;
  }

4.2 color类型

 $color:red;
 $colorHex:blue;
 
 .div{
 color:$color;
 background-color:$colorHex;
}

4.3 string类型

  $str:'1.jpg';
  
  .div{
      background-image:url('img/'+$str);
  }

4.4 数组类型

   $list:(100px,200px,'string',300px,400px);//数组下标从1开始
   
   .div{
       width:nth($list,1);//100px
       zoom:index($list,'string');//'string'位置是3 所以转义为css为 zoom:3
   }

4.5 map类型

   $map:(top:1px,left:2px,bottom:3px,right:4px);
   
   .div1{
       top:map-get($map,top);
       left:map-get($map,left);
   }
   .div2{
         @each $key, $value in $map {//@each作用是把map循环遍历
             #{$key}:$value;
         }
   }

五、基本运算

5.1 普通运算

在进行乘除运算时,第一个有px单位,第二个可以没有

  $num1:100px;
  $num2:200px;
  $width: $num1 + $num2;
  
  .div{
  font:(10px/8);//font:1.25px 
  font:(10px*8);//font:80px
  width:$width/2;//(100+200)/2 =150px
  margin-left:(5px + 8px/2);//9px
  }

5.2 颜色运算

  $color1:#010203;
  $color2:#040506;
  $color3:#a69e61;
  
  .div{
  color:mix($color1, $color2);
  color:red($color3);
  color:green($color3);
  color:blue($color3);
  color:rgb(red($color3),green($color3),blue($color3));//color:#a69e61
  }

5.3 字符串运算

  $str:'1.jpg';
  .div{
  background-image:url('img/'+$str);
  }

5.4 mix运算

5.4.1 示例

  @mixin helloMixin{
  display:inline-block;
  font:{
      size:20px;
      weight:500px;
    }
    color:red;
  }

  @mixin helloMixin2{
    padding:20px;
    @mixin helloMixin;//嵌套helloMixin 注意重复的 不然重复的都会存在
    background-color:red;
  }

  .div{
  @include helloMixin2;
  }