Sass语法详解

最新推荐文章于 2023-10-19 12:30:00 发布
最新推荐文章于 2023-10-19 12:30:00 发布
阅读量1k 收藏 3
点赞数 3
分类专栏： Sass 文章标签： sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SeekerTime/article/details/69951442
版权

一、文件后缀名

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。本文中所有sass文件都指后缀名为scss的文件。

//文件后缀名为sass的语法
body
     background:#eee
     font-size:12px
p
     background:#0982c1

//文件后缀名为scss的语法
body{
    background:#eee;
    font-size:12px;
}
p{
    background:#0982c1;
}

二、导入

sass的导入（@import）规则和css的有所不同，编译时会将@import的scss文件合并进来只生成一个css文件。但是如果你在sass文件中导入css文件如@import ‘reset.css’，那效果跟普通css导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。
被导入sass文件a.scss:

//a.scss
body{
    background:#eee;
}

需要导入样式的sass文件b.scss:

//b.scss
@import 'reset.css';
@import 'a';
p{
    background:#0982c1;
}

转译出来的b.css样式：

@import 'reset.css';
body{
    background:#eee;
}
p{
    background:#0982c1;
}

根据上面可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

三、注释

sass有两种注释方式，一种是标准的css注释方式 /* */，另一种是//双斜杠形式的单行注释，不过这种单行注释不会被转译出来。
1、标准的css注释：

/*
*我是css的标准注释
*设置body内距
*/
body{
    padding:5px;
}

2、双斜杠单行注释
单行注释跟JavaScript语言中的注释一样，使用右斜杠（//）,但单行注释不会输入到css中。

//我是css的标准注释
//设置body内距
body{
    padding:5px;   //5px
}

四、变量

sass变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号（：）分隔开（跟css属性设置一样），如果值后面加上 !default则表示默认值。
1、普通变量
定义之后可以在全局范围内使用。

//sass style
$fontSize:12px;
body{
    font-size:$fontSize;
}

//css style
body{
    font-size:12px;
}

2、默认变量
sass的默认变量仅需要在后面加上 !default 即可。

//sass style
$baseLineHeight : 1.5 !default;
body{
    line-height:$baseLineHeight;
}

//css style
body{
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

//sass style
$baseLineHeight: 2;
$baseLineHeight: 1.5!default;

body{
    line-height:$baseLineHeight;
}

//css  style
body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。
3、特殊变量
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$varlables}形式使用。

//sass style
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5!default;

//应用于class和属性
.border-#{$borderDirection}{
    border-#{$borderDirection}: 1px solid #ccc;
}

//应用于复杂的属性值
body{
    font: #{baseFontSize} / #{$baseLineHeight};
}

//css style
.border-top{
    border-top:1px solid #ccc;
}
body{
    font:12px / 1.5;
}

4、多值变量
多值变量分为list类型和map类型 ，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list类型
list数据可通过空格，逗号或小括号分隔多个值，可用nth（$var,$index）取值。关于list数据操作还有很多其他函数如length($list),join($list1,$list2,[$separator]),append($list,$value,[$separator])等。
定义

//一维数组
$px:5px  10px  20px 30px;
//二维数组，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px:(5px 10px)(20px 30px);

使用

//sass style
$linkColor: #08c #333!default; //第一个为默认值，第二个为鼠标滑过值
a{
    color:nth($linkColor,1);
    &:hover{
        color:nth($linkColor,2);
    }
}

//css style
a{
    color:#08c;
}
a:hover{
    color:#333;
}

map类型
map数据以key和value成对出现，其中value又可以是list。格式为：$map(key1:value1, key2:value2, key3:value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2),map-keys($map),map-values($map）等。
定义

$headings:(h1:2em,h2:1.5em,h3:1.2em);

使用

//sass style
$headings:(h1:2em,h2:1.5em,h3:1.2em);
@each $header,$size in $headings{
    #($header){
        font-size:$size;
    }
}



//css  style
h1{
    font-size:2em;
}
h2{
    font-size:1.5em;
}
h3{
    font-size:1.2em;
}

5、全局变量
在变量值后面加上 !global即为全局变量。
目前变量机制：在选择器中声明的变量会覆盖外面全局声明的变量。（这也就是人们常说的sass没有局部变量）

//sass style
$fontSize:12px;
body{
    $fontSize:14px;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}

//css  style
body{
    font-size:14px;
}
p{
    font-size:14px;
}

启用global之后的机制
请注意，这个目前还无法使用，（3.4以后）,所以样式不是真实解析出来的。

//sass style
$fontSize:12px;
$color:#333;
body{
    $fontSize:14px;
    $color:#fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}

//css   style
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了 !global。通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，而只有设置了 !global之后才会变成全局变量。

五、嵌套（Nesting）

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
1、选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器

//sass  style
#top_nav{
    line-height:40px;
    text-transform:capitalize;
    background-color:#333;
    li{
        float:left;
    }
    a{
        display:block;
        padding:0 10px;
        color: #fff;

        &:hover{
            color:#ddd;
        }
    }
}

//css style
#top_nav{
    line-height:40px;
    text-transform:capitalize;
    background-color:#333;
}
#top_nav li{
    float:left;
}
#top_nav a{
    display:block;
    padding:0 10px;
    color:#fff;
}
#top_nav a:hover{
    color:#ddd;
}

2、属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width,border-color都是以border开头。

//sass style
.fakeshadow{
    border:{
        style:solid;
        left:{
            width:4px;
            color:#888;
        }
        right:{
            width:2px;
            color:#ccc;
        }
    }
}

//css style
.fakeshadow{
    border-style:solid;
    border-left-width:4px;
    border-left-color:#888;
    border-right-width:2px;
    border-right-color:#ccc;
}

六、@at-root

sass3.3.0中新增功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
1、普通跳出嵌套

//sass  style
//没有跳出
.parent-1{
    color:#f00;
    .child{
        width:100px;
    }
}
//单个选择器跳出
.parent-2{
    color:#f00;
    @at-root{
        .child{
            width:200px;
        }
    }
}
//多个选择器跳出
.parent-3{
    color:#f00;
    @at-root{
        .child1{
            width:300px;
        }
        .child2{
            width:400px;
        }
    }
}

//css  style
.parent-1{
    color:#f00;
}
.parent-1 .child{
    width:100px;
}
----------
.parent-2{
    color:#f00;
}
.child{
    width:200px;
}
----------
.parent-3{
    color:#f00;
}
.child1{
    width:300px;
}
.child2{
    width:400px;
}

2、@at-root( widthout: … ) 和 @at-root( with: … )
默认@at-root 只会跳出选择器嵌套，而不能跳出@media 或 @support , 如果要跳出这两种，则需要使用@at-root(without: media), @at-root(without: support) 。这个语法的关键词有四个： all(表示所有)，rule(表示常规css), media(表示media), support(表示support，因为@support目前还无法广泛使用，所以在此不表)。我们默认的@at-root其实就是@at-root(without:rule)。

//sass  style
//跳出父级元素嵌套
@media print{
    .parent1{
        color:#f00;
        @at-root .child1{
            width:200px;
        }
    }
}
//跳出media嵌套，父级有效
@media print{
    .parent2{
        color:#f00;
        @at-root( without:media ){
        .child2{
            width:200px;
            }   
        }
    }
}
//跳出media和父级
@media print{
    .parent3{
        color:#f00;
        @at-root (without:all){
            .child3{
                width:200px;
            }
        }
    }
}

//css  style
@media print{
    .parent1{
        color:#f00;
    }
    .child1{
        width:200px;
    }
}


----------
@media print{
    .parent2{
        color:#f00;
    }
}
.parent2 .child2{
    width:200px;
}


----------
@media print{
    .parent3{
        color:#f00;
    }
}
.child3{
    width:200px;
}

3、@at-root 与 & 配合使用

//sass  style
.child{
    @at-root .parent &{
        color:#f00;
    }
}
//css  style
.parent .child{
    color:#f00;
}

4、应用于@keyframe

//sass  style
.demo{
    ...
    animation:motion 3s infinite;
    @at-root{
        @keyframes motion{
            ...
        }
    }
}
//css  style
.demo{
    ...
    animation:motion 3s infinite;
}
@keyframes motion{
    ...
}

七、混合（Mixin）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
1、无参数mixin

//sass  style
@mixin center-block{
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css  style
.demo{
    margin-left:auto;
    margin-right:auto;
}

2、有参数mixin

//sass style
@mixin opacity($opacity:50){
    opacity:$opacity / 100;
    filter:alpha(opacity = $opacity);
}

//css  style
.opacity{
    @include opacity; //参数使用默认值
}
.opacity-80{
    @include opacity(80);  //传递参数
}

3、多个参数mixin
调用时可直接传入值，如@include 传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

//sass  style
@mixin horizontal-line($border:1px dashed #ccc,$padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h-product li{
    @include horizontal-line(padding:15px);
}
//css  style
.imgtext-h li{
    border-bottom:1px solid #ccc;
    padding-top:10px;
    padding-bottom:10px;
}
.imgtext-h-product li{
    border-bottom:1px dashed #ccc;
    padding-top:15px;
    padding-bottom:15px;
}

4、多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables… 。

//sass style
//box-shadow 可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow){
    -webkit-box-shadow:$shadow;
    box-shadow:$shadow;
}
.box{
    border:1px solid #ccc;
}

//css style
.box{
    border:1px solid #ccc;
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);   //上右下左
    box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);

}

5、@content
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

//sass style
@mixin max-screen($res){
    @media only screen and (max-width:$res){
        @content;
    }
}
@include max-screen(480px){
    body{
        color:red;
    }
}

//css  style
@media only screen and (max-width:480px){
    body{
        color:red;
    }
}

PS:@mixin通过@include调用后解析出来的样式是以拷贝的形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

八、继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

//sass  style
h1{
    border:4px solid #ff9aa9;
}
.speaker{
    @extend h1;
    border-width:2px;
}

//css  style
h1,.speaker{
    border:4px solid #ff9aa9;
}
.speaker{
    border-width:2px;
}

占位选择器%
从sass3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

//sass style
%ir{
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0;
}
%clearfix{
    @if $lte7{
        *zoom:1;
    }
    &:before,
    &after{
        content:'';
        display:table;
        font:0/0 a;
    }
    &:after{
        clear:both;
    }
}
#header{
    h1{
        @extend %ir;
        width:300px;
    }
}
.ir{
    @extend %ir;
}

//css style
#header h1, .ir{
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0;
}
#header h1{
    width:300px;
}

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
PS：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

九、函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@function开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten（$color,$amout）和darken（$color,$amount）,它们的第一个参数都是颜色值，第二个参数都是百分比。

//sass  style
$baseFontSize: 10px!default;
$gray: #ccc !default;

//pixels to rems
@function pxToRem($px){
    @return $px / $baseFontSize * 1rem;
}
body{
    font-size:$baseFontSize;
    color:lighten($gray,10%);
}
.test{
    font-size:pxToRem(16px);
    color:darken($gray,10%);
}

//css  style
body{
    font-size:10px;
    color:#E6E6E6;
}
.test{
    font-size:1.6rem;
    color:#B3B3B3;
}

十、运算

sass具有运算的特性，可以对数值型的value（如：数字、颜色、变量等）进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$baseFontSize: 14px!default;
$baseLineHeight: 1.5!default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;

//grid
$_columns: 12!default;
$_column-width: 60px!default;
$_gutter: 20px !default;
$_gridsystem-width: $_columns * ($_column-width + $_gutter);

十一、条件判断及循环

1、@if 判断
@if可一个条件单独使用，也可以和@else结合多条件使用

//sass  style
$lte7:true;
$type:monster;
.ib{
    display:inline-block;
    @if $lte7{
        *display:inline;
        *zoom:1;
    }
}

p{
    @if $type == ocean{
        color:blue;
    }@else if $type == matador{
        color:red;
    }@else if $type == monster{
        color:green;
    }@else{
        color:black;
    }
}

//css  style
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p{
    color:green;
}

2、三目判断
语法为： if（$condition,$if_true,$if_false）。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true,1px,2px) => 1px
if(false,1px,2px) => 2px

3、for循环
for循环有两种形式，分别为：@for $var from < start > through < end >和 @for $var from < start > to < end >。 $i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass  style
@for $i from 1 through 3{
    $item-#{$i}{ width: 2em * $i;}
}

//css style
.item-1{
    width:2em;
}
.item-2{
    width:4em;
}
.item-3{
    width:6em;
}

4、@each循环
语法为：@each $var in < list or map>。其中 $var 表示变量，而list和map表示list类型数据和map类型数据。sass3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环

//sass style
$animal-list: puma, sea-slug, egret,salamander;
@each $animal in $animal-list{
    .#{$animal}-icon{
        background-image:url('/images/#{$animal}.png');
    }
}

//css  style
.puma-icon{
    background-image:url('/images/puma.png');
}
.sea-slug-icon{
    background-image:url('/images/sea-slug.png');
}
.egret-icon{
    background-image:url('/images/egret.png');
}
.salamander-icon{
    background-image:url('/images/salamander.png');
}

多个字段list数据循环

//sass style
$animal-data:(puma,black,default),(sea-slug,blue,pointer),(egret,white,move);
@each $animal,$color,$cursor in $animal-data{
    .#{$animal}-icon{
        background-image:'/images/#{$animal}.png';
        border:2px solid $color;
        cursor:$cursor;
    }
}

//css style
.puma-icon{
    background-image:url('/images/puma.png');
    border: 2px solid black;
    cursor:default;
}
.sea-slug-icon{
    background-image:url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor:pointer;
}
.egret-icon{
    background-image:url('/images/egret.png');
    border: 2px solid white;
    cursor:move;
}

多个字段map数据循环

//sass  style
$headings:(h1:2em,h2:1.5em,h3:1.2em);
@each $header,$size in $headings{
    #{$header}{
        font-size:$size;
    }
}

//css style
h1{
    font-size:2em;
}
h2{
    font-size:1.5em;
}
h3{
    font-size:1.2em;
}
探寻时间
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Sass语法
遇见更好的自己
06-20 971
1.使用 SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss(Sassy CSS)1）屏幕上显示testsass.scss文件转化为css代码 2）如果将显示的结果保存test.css文件 3）让sass自动监听某个文件或目录的变化并做相应的处理。如：发现.scss文件变化，显示提示信息；发现.scss文件变化，自动生成编译后的css文件。监视 testsass
Sass用法
tianranran的博客
02-21 83
# SASS - [SASS官网](https://www.sass.hk/) - ### 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！ - `sass` 是一个 css 的预编译工具 - 也就是能够 **更优雅** 的书写 css - `sass` 写出来的东西 **浏览器不认识** - 依旧是要转换成 css 在浏览器中运行 - 这个时候就需要一个工具来帮我们做 ## 安装 sass 环境 - 以前的 `sass` 需要依赖一个 `ruby` 的环境 - 现在的 `sas
Sass使用语法（详细）
weixin_44646763的博客
06-08 6939
Sass使用语法整理
前端必知：37.sass
qq_52799985的博客
08-05 521
Sass（Syntactically Awesome Stylesheets）是一种 CSS 的预处理器，提供了一种扩展和增强 CSS 的方式。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量(variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
sass最简教程，从入门到上手，简单易学
CRMEB小程序商城的博客
07-23 1636
以上就是sass的logo, 开始之前你首先得具备html和css的基本知识！ 什么是sass？ Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了.
Sass常用写法
weixin_33920401的博客
11-24 836
Sass使用变量，变量以$开头 $bgcolor:#f40; background-color:$bgcolor; 如果变量需要嵌套在字符串当中，就需要写在#{}之中 $direction:left; border-#{$direction}-radius:10px; 计算、嵌套、属性嵌套 这三个可以从字面上理解，最后一个嵌套属性举个栗子 div{a:hover...
sass基础语法大全，你值得拥有
局外人LZ的博客
06-16 833
说明：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!default 给一个未通过!default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量。
CSS预处理器Sass详解
09-24
Sass，全称Syntactically Awesome Style Sheets，是一种强大的CSS预处理器，它扩展了CSS的语法，为开发者提供了更高效、更有组织的方式来编写样式表。本文将详细介绍Sass的主要特点、与Less的对比，以及Sass的关键...
css\html语法详解
09-19
在这份“css\html语法详解”中，我们将深入探讨这两个关键领域的基本概念、语法以及常见用法。 HTML是一种标记语言，用于描述网页内容的结构和意义。它的主要任务是组织网页上的文本、图像、链接等元素。以下是一些...
详解如何在vue中使用sass
08-30
然后，我们可以使用sass语法编写样式文件，但是需要注意sass语法不使用大括号和分号，而是使用缩进语法。如果您喜欢使用带大括号的语法，可以改成lang="scss"。 3. 使用sass编写样式文件 在编写样式文件时，我们...
sass全部语法及写法、写法案例
11-23
本文档包含sass所有的语法、以及写法规范、写法案例。
详解在vue-cli项目中安装node-sass
12-01
1，使用save会在package.json中自动添加。 npm install node-sass --save npm install sass-loader --save 2，通常使用npm安装会出现以下报错，安装...cnpm install node-sass --save （使用淘宝镜像安装node-sass）
Sass语法学习（超详细）
最新发布
qq_51389038的博客
10-19 1018
在一般编写 CSS 的时候呢，我们一遍一遍的编写相同的选择器去处理深层级的样式，而 Sass 给你一种轻松的方式，你可以在一个样式规则中直接编写另一个样式规则，而不是重复相同的选择器，Sass 将自动组合内外部的选择器。通俗点说就是：你可以在父选择器的样式中直接编写子元素的样式，同理你可以在一个子元素的样式中再去编写孙元素的样式，可以一层一层的嵌套着去写样式。字符串函数数字函数列表函数Introspection函数条件函数Map 函数颜色函数@if 指令@each 指令。
sass的基本介绍与常用语法
qq_45799465的博客
02-25 1176
概念 sass是可编译的的css程序，在sass中可以对css程序定义变量，if，for，函数等等。 scss 语法形式和普通的css语法形式完全相同，只是引入了变量，if，for等。实际项目中推荐使用scss格式的文件。 编译 浏览器不支持sass文件的执行，只支持css文件的执行。asss或者scss的we你按都必须变异成css文件，这里推荐使用gulp程序打包压缩的同时，编译sass文件。 配置安装 nodejs默认是从美国的服务器下载安装第三方依赖包，需要修改下载路径是中国服务器。
sass语法
freeman_xv1的博客
12-04 463
1.基础语法 (1).注释 //注释 /* 1.单行注释 + //开头,后面书写注释 + 会在编译的时候被忽略掉 + 开发注释 2.多行注释 + /**/ + 在两个星号之间书写注释 + 会在编译的时候被保留下来 + 但是将来打包的时候,会被忽略掉 3.强力注释 + /*! 注释内容 */ + 在注释的开始写一个 感叹号(!) + 会在编译的时候保留下来 + 将来打包的时候也会保留 */ (2)
SASS语法
HHYZBC的博客
06-20 1396
目录Sass是什么语法格式SASS变量Sass变量的定义规则连接符与下划线CSS定义变量的方法SASS变量的使用变量的作用域局部变量全局变量变量值类型默认值注释SASS 运算 （Operations）符的基本使用语法嵌套规则选择器嵌套父选择器 &属性嵌套 SASS 导入@import局部文件（部分）嵌套 @importSASS混合指令 （Mixin Directives）定义与使用混合指令 @mixin@mixin混入总结SASS @extend（继承）指令占位符%SASS 插值语句 #{ }sass 常见
一文解决零基础 Sass入门
Asen-coder的博客
05-24 880
一文解决零基础 Sass入门，从初次使用sass到熟练掌握sass（mixin混入与媒体查询@media）
sass的基本语法
DcTbnk的博客
05-12 1459
一.定义 sass的基本语法 1,注释:**************************************** 单行注释 // 多行注释 /* */ 2,变量**************************************** $变量名称 : 变量的数值 便于后期的维护和修改 例如今天是5:12,要改变样式为黑白配色 之前的css要改变所有的样式设定,现在
Sass学习笔记 — 3. 深入学习
jiangbo110119的博客
01-30 1531
Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass
less sass 语法对比
04-29
Less和Sass都是流行的CSS扩展语言，它们可以让开发者更高效地编写CSS代码。 Less使用"@"符号来定义变量，而Sass使用"$"符号来定义变量。此外，Sass的变量可以在多个文件中共享，而Less的变量仅限于该文件中。 对于嵌套规则，Less使用“&”符号来表示当前选择器，而Sass使用“#{$}”语法来表示。Less还支持属性嵌套，可以将相关的属性嵌套在同一层级中，这在Sass中不被支持。 在Less中，可以使用内置的函数和运算符来实现动态计算和生成CSS属性值。而在Sass中，也有类似的函数和运算符，但Sass更为强大和灵活，可以使用条件语句、循环语句和自定义函数进行高级的计算和处理。 Less没有实现Sass的mixin和extend功能，但可以通过嵌套规则和变量提供类似的功能。Sass的mixin可以通过@include语法重用样式代码，而extend可以实现样式继承，可以使代码更为简洁和可维护。 总的来说，Less和Sass都是优秀的CSS扩展语言，具有各自的特点和优势。开发者可以根据自己的需求和喜好来选择使用哪种语法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值