Sass进阶-（数据类型，变量运算，mixin）

最新推荐文章于 2025-06-15 18:27:52 发布

洪涛美学

最新推荐文章于 2025-06-15 18:27:52 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： sass 前端文章标签： sass sass进阶

本文链接：https://blog.youkuaiyun.com/hong836717428/article/details/78193272

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

sass

4 篇文章

订阅专栏

本文详细介绍了Sass中各种数据类型的使用方法，包括map、列表、数字、字符串、布尔值、null及颜色等，并展示了如何通过变量进行简单的数学运算。此外，还深入探讨了如何运用mixin来提高代码复用性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据类型

$maps:( color:red , borderColor:blue );
body{
  background:map-get($maps,color);
  border-color:map-get($maps,borderColor);
}

list

可以用空格分开或者逗号分开或者括号分开

$paddings : 5px 10px 5px 10px;
body {
    border : 1px solid red;
    padding : (10px 20px) (10px 20px);
    margin : 10px,20px 30px 40px;
    /*如果我们只想取一个值 如:*/
    padding-left : nth($paddings,1);
    /*注意：索引是从1开始的不是从0.*/
}

数字类型

$n1 : 1.23;
$n2 : 14px;
$n3 : 134;
span{
font-size : $n2;
}

字符串类型

$s1 : hongtao;
$s2 : 'hongtao';
$s3 : "hongtao";

.#{$1}{
    font-size : $n2;
}

boolean类型

$b : true;
$f : false;

null

 $null : null;
 body{
    @if $null ==null {
        font-size : $n2;
    }
 }

color

$c1 : blue;
$c2 : #ccc;
$c3 : rgba(0,0,0,.5);

变量操作

“==”,”!=”
判断相等或者不等，支持所有数据类型

“<”,”>”,”<=”,”>=”
仅仅支持数字类型

四则运算+ - * / %

$w1 : 14px;
$w2 : 20px;

span {
    width : $w1 + $w2;
    /*注意：要空格*/
}

/*如果需要连字符*/

a:hover {
    cursor : e + -resize;是一样的
}

$tao : tao;
p:after{
/*字符串内要用#{}*/
content : 'hello,hong#{$tao}'
}

p {
/*这是标准css 不会运算*/
font: 20px/10px;
}

span {
/*需要注意的*/
width : $w1/2;
width : round($w1)/2;
height : (100px/2);
}

mixin

直接看示例吧

@mixin cont($color:red,fontSize:14px){
    color:$color;
}
body {
@include cont(#fff,18px);
/*或者*/
@include cont(fontSize:18px);
}

/*多值参数*/
@mixin box-shadow($shadow){
    -moz-box-shadow : $shadow;
    -webkit-box-shadow : $shadow;
    box-shadow : $shadow;
}

.shadows{
    /*这么写会报错，因为参数只有一个，下面的逗号会被当作俩个参数*/
    @include box-shadow:(0px 4px 6px #ccc,0px 5px 7px red);
}
/*为了解决上述问题*/
@mixin box-shadow($shadow...){/*表示这个参数含有多条属性的*/
    ...
}

/*传递内容*/
@mixin style-for-iphone{
        @medio only screen and (min-device-width:320px) and (max-device-width:568px){
        @content
    }
}

@include style-for-iphone{
    font-size : 12px;
}