sass讲解

2022-08-31 22:04:40 阅读：220 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9