其他分享
首页 > 其他分享> > sass讲解

sass讲解

作者:互联网

sass概述

sass是一个预编译的css语言,它是使用ruby语言写的,和它一样的预编译语言还有less,它是使用js写的。sass的环境之前是ruby环境,但是由ruby并了python,所以它可以运行在python环境上,这个些内容并不能直接使用,因为它属于预编译css,没有进行编译是不能被使用的。编译完还是css,那么我们知道它有个编译过程并比损耗效率,那么它的优势在哪?

预编译css的优势就是它可以减少你的css代码的书写量,并编译出对应的简洁的css代码。

常用的预编译css

sass (底层采用ruby书写)循环可以支持所有类型

less (底层采用js书写) 循环只支持数值类型

stylus (底层采用的是js (功能单一) 它是以缩进来区分对应的层级)

sass的常用俩种形式

sass 后缀 (以缩进来做为区分 没有{} ;)

scss 后缀 (类似于css的区分)

sass的编译环境

node支持python 运用node环境来运行sass

安装

npm install sass -g

编译


sass 需要编译的文件 编译后的文件

监听编译


sass --wacth 需要编译的文件:编译后的文件
vscode的插件来帮助我们编译sass
easy sass 扩展

扩展设置

保存后自动编译

 

 

 

live sass 扩展

sass入门

官方文档

变量定义 使用$进行变量定义(*)

$color:red;
div{
   background-color:$color;
}

div {
 background-color: red;
}
选择器嵌套 使用&表示当前选择器(*)

div{
   background-color:$color;
   a,b{
       text-align: center;
  }
  &:hover{
       color: $color;
  }
}
div a, div b {
 text-align: center;
}

div:hover {
 color: red;
}
样式嵌套

span{
   border: 1px solid #ccc {
       bottom: none;
      };
}

div span {
 border: 1px solid #ccc;
 border-bottom: none;
}
支持运算符 + - * / %

$size:10px;
p{
   font-size: $size * 5 / 10 + 20 % 1;
}
#box{
   font-size: 10px + 10;
}

p {
 font-size: 5px;
}
#box {
 font-size: 20px;
}
支持if else判断

#content{
   @if $size>5 {font-size: $size - 5;}
   @if $size - 5>5 {color:red}
   @else if $size - 5<5{color:blue}
   @else {color:green}
}

#content {
 font-size: 5px;
 color: green;
}
支持for循环 (插值表达式 #{})

//普通for循环
@for $i from 1 through 3 {
   .item-#{$i} { width: 2em * $i; }
}
//for each循环
$list : 1,2,3,4,5;
@each $var in $list {
   .icon-#{$var}{
       font-size:$var * 5px ;
  }
}

.item-1 {
 width: 2em;
}

.item-2 {
 width: 4em;
}

.item-3 {
 width: 6em;
}

.icon-1 {
 font-size: 5px;
}

.icon-2 {
 font-size: 10px;
}

.icon-3 {
 font-size: 15px;
}

.icon-4 {
 font-size: 20px;
}

.icon-5 {
 font-size: 25px;
}
支持while循环

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

.while-6 {
 width: 12em;
}

.while-4 {
 width: 8em;
}

.while-2 {
 width: 4em;
}
注释 /**/ 多行注释 // 单行注释

// 不会编译到css文件 /**/会编译到css文件

混入器 mixin (*)

//混入器
@mixin borderStyle {
   border: 1px solid red;
}
.box{
   @include borderStyle()
}
//传参的混入器 支持默认参数的
@mixin borderStyle1($a:1px,$b:solid,$c:green) {
   border: $a $b $c;
}
#box{
   // @include borderStyle1(1px,solid,red)
   @include borderStyle1(2px)
}

.box {
 border: 1px solid red;
}

#box {
 border: 2px solid green;
}
方法 返回值的形式

@function reduce($a){
   @return $a+10;
}
#hello{
 width: reduce(10px);
}

#hello {
 width: 20px;
}
继承 extend(复用 *)

#hi{
   //继承hello的内容
   @extend #hello;
   height: 20px;
}

#hello, #hi {
 width: 20px;
}

#hi {
 height: 20px;
}
导入 (*)

@import './mixin.scss';

#box{
   @include borderStyle1()
}

#box {
 border: 1px solid green;
}

gulp

gulp是一个自动化构建工具(构建环境 将代码打包 基于文件流的形式) (outer了),webpack --- vite。

https://www.gulpjs.com.cn/

都是基于node环境运行的。用到模块来构建环境


npm install gulp -g
npm install webpack -g
npm insatll vite -g

 

标签:sass,width,color,编译,讲解,font,size
来源: https://www.cnblogs.com/bigBossKiss/p/16644639.html