码迷，mamicode.com
首页 > 其他好文 > 详细

sass基础语法

时间：2020-01-29 23:43:41      阅读：70      评论：0      收藏：0      [点我收藏+]

标签：dex   rom   weight   嵌套   获取字符串长度   定位   引号   作用   app   

sass基础语法

!default 表示默认值

+ 拼接字符串

#{ } 识别为变量名

demo.scss

$width:300px;
$height:300px;

$color:#e03434;

$baseWidth:200px;

$baseWidth:100px !default;

.div1{
    width:$width;
    height:$height;
    background-color:$color;
}
.div2{
    width:$baseWidth;
    height:$baseWidth;
    background-color:$color;
}

demo.css

.div1 {
  width: 300px;
  height: 300px;
  background-color: #e03434; }

.div2 {
  width: 200px;
  height: 200px;
  background-color: #e03434; }

变量作用域

内部变量只能在内部使用，否则会报错

demo.scss

$width: 300px;
$color: #ffe932;


.div1 {
    
    height: $width;

    $widthInner: 100px;
    width: $widthInner;

}

.div2 {
    width: $width;
}

demo.css

.div1 {
  height: 300px;
  width: 100px;
}

.div2 {
  width: 300px;
}

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

  • 文件拓展名是 .css；
  • 文件名以 http:// 开头；
  • 文件名是 url()；
  • @import 包含 media queries。

org.scss

@import ‘org.css‘;

org.css

@import url(org.css);

/*# sourceMappingURL=org.css.map */

正常情况下的使用：

在_base.scss中写入通用样式

$color: red !default;

body {
    margin: 0;
    padding: 0;
}

引用通用样式文件

demo.scss

@import ‘base‘;
$width: 300px;
$color: #ffe932;



.div {
    width: $width;
    background-color: $color;
}

demo.css

body {
  margin: 0;
  padding: 0;
}

.div {
  width: 300px;
  background-color: #ffe932;
}

sass常见的基本数据类型

list 数组下标从1开始

demo.scss

$width: 300px;
$zoomValue: 2;


$color: red;
$colorHex: #ffe932;


$str: ‘hello.jpeg‘;


$list: (100px,200px,‘string‘,2);

$map: (top:1px,left:2px,bottom:3px,right:4px);

/*number*/
.div {
    width: $width;
    height: $width;
    zoom: $zoomValue;
}


/*color*/
.div {
    color: $color;
    background-color: $colorHex;
}

/*string*/
.div {
    background-image: url(‘images/‘+$str);
}

/*list*/
.div {
    width: nth($list, 1);
    height: nth($list, 2);

    zoom:index($list,‘string‘);
}

/*map*/

.div {
    top:map-get($map,top);
    left:map-get($map,left);
}
.div {
    @each $key, $value in $map {
        #{$key}:$value;
    }
}

demo.css

/*number*/
.div {
  width: 300px;
  height: 300px;
  zoom: 2;
}

/*color*/
.div {
  color: red;
  background-color: #ffe932;
}

/*string*/
.div {
  background-image: url("images/hello.jpeg");
}

/*list*/
.div {
  width: 100px;
  height: 200px;
  zoom: 3;
}

/*map*/
.div {
  top: 1px;
  left: 2px;
}

.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}

sass加减乘除基本运算

直接运算需要加 ()

通过变量进行运算不需要加 ()

demo.scss

$num1:100px;
$num2:200px;


$width: $num1 + $num2;

$color1: #010203;
$color2: #040506;
$color3: #a69e61;

$str:‘hello.jpeg‘;


.div {
    width: $width;
}

/* 加减乘除 */
.div {
    font: 10px/8px;
    font: (10px/8);
    font: (10px*8);
    width: $width/2;
    margin-left: (5px + 8px/2);
}

/*颜色运算*/
// 不建议直接运算
.div {
    color: $color1 + $color2;
}

// 建议使用sass内置函数
.div {
    color: mix($color1, $color2);//混合色
    color: red($color1);//red 取出红色值
    color: red($color3);
    color: green($color3);
    color: blue($color3);
    color: rgb(red($color3),green($color3),blue($color3));//拼接处想要的色值
}

/*字符串*/

.div {
    background-image: url(‘images/‘+$str);
}

demo.css

@charset "UTF-8";
.div {
  width: 300px; }

/* 加减乘除 */
.div {
  font: 10px/8px;
  font: 1.25px;
  font: 80px;
  width: 150px;
  margin-left: 9px; }

/*颜色运算*/
.div {
  color: #050709; }

.div {
  color: #030405;
  color: 1;
  color: 166;
  color: 158;
  color: 97;
  color: #a69e61; }

/*字符串*/
.div {
  background-image: url("images/hello.jpeg"); }

/*# sourceMappingURL=demo.css.map */

mixin 语法块

demo.scss

/*一般mixin*/

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

    color: red;
}

/*嵌套mixin*/

@mixin helloMixin2 {
    padding: 10px;

    @include helloMixin;

    background-color: red;
}

/*参数mixin*/

@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style:dashed;
    };
}
.div {
    width: 100px;
    @include helloMixin2;
}

.div {
    @include sexy-border(blue,2px);
}

demo.css

@charset "UTF-8";
/*一般mixin*/
/*嵌套mixin*/
/*参数mixin*/
.div {
  width: 100px;
  padding: 10px;
  display: inline-block;
  padding: 20px;
  font-size: 20px;
  font-weight: 500;
  color: red;
  background-color: red;
}

.div {
  border-color: blue;
  border-width: 2px;
  border-style: dashed;
}

sass继承和嵌套

demo.scss

/*简单继承*/
.div {
    border:1px;
    background-color: red;
}

.divext {
    @extend .div;
    border-width: 3px;
}

/*关联属性继承*/
.div1 {
    border:1px;
    background-color: red;
}

.div1.other {
    background-image: url(‘hello.jpeg‘);
}

.divext {
    @extend .div1;
}

/*链式继承*/

.div1 {
    border: 1px solid #000;
    color: blue;
}
.div2 {
    @extend .div1;
    color: red;
}
.div3 {
    @extend .div2;
    color: #000;
}

/*伪类继承*/
a:hover {
    text-decoration: underline;
}
.hoverlink {
    color: red;
    @extend :hover;
}

demo.css

@charset "UTF-8";
/*简单继承*/
.div, .divext {
  border: 1px;
  background-color: red; }

.divext {
  border-width: 3px; }

/*关联属性继承*/
.div1, .divext, .div2, .div3 {
  border: 1px;
  background-color: red; }

.div1.other, .other.divext, .other.div2, .other.div3 {
  background-image: url("hello.jpeg"); }

/*链式继承*/
.div1, .divext, .div2, .div3 {
  border: 1px solid #000;
  color: blue; }

.div2, .div3 {
  color: red; }

.div3 {
  color: #000; }

/*伪类继承*/
a:hover, a.hoverlink {
  text-decoration: underline; }

.hoverlink {
  color: red; }

/*# sourceMappingURL=demo.css.map */

嵌套--子元素的样式

嵌套--样式属性分离

demo.scss

$width: 300px;
$color: #fff;

.div1 {
    width: $width;
    height: $width;;
    background-color: #color;

    .div-inner {
        width: $width;
        height: $width;
        background-color: #color;
        .div-inner-inner {
            width: $width;
            height: $width;
            background-color: #color;
        }
    }
    a {
        color: red;
    }
}

.div1 {
    width: $width;
    height: $width;;
    background-color: #color;

    .div-inner {
        border: {
            left: 1px solid #000;
            top: 2px solid #000;;
        };
        background: {
            image:url(‘abc.png‘);
            color: #000;;
        };
    }
}

demo.css

.div1 {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner .div-inner-inner {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 a {
  color: red;
}

.div1 {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner {
  border-left: 1px solid #000;
  border-top: 2px solid #000;
  background-image: url("abc.png");
  background-color: #000;
}

sass条件控制

demo.scss

/*if*/

$type: ‘bufy‘;

p {
    @if $type == ‘bufy‘ {
        color: red;
    } @else if $type == ‘tim‘ {
        color: blue;
    } @else if $type == ‘tony‘ {
        color: green;
    } @else {
        color: black;
    }
}

@if $type == ‘bufy‘ {
    .div {
        color: red;
    }
}@else {
    .div {
        color: blue;
    }
}

/*for*/

@for $i from 1 through 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
@for $i from 1 to 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
/*for list*/
$list:(1,2,3,4,5);
@for $i from 1 through length($list) {
    .item#{$i} {
        width: 1px * $i;
    }
}

/*while*/

$i: 6;

@while $i > 0 {
    .item#{$i} {
        width: 1px * $i;
    }

    $i: $i - 2;
}

/*each*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);

.div {
    @each $key , $value in $map {
        #{$key}:$value;
    }
}

demo.css

/*if*/
p {
  color: red;
}

.div {
  color: red;
}

/*for*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

/*for list*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item4 {
  width: 4px;
}

.item5 {
  width: 5px;
}

/*while*/
.item6 {
  width: 6px;
}

.item4 {
  width: 4px;
}

.item2 {
  width: 2px;
}

/*each*/
.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}

内置函数

@debug 实时打印结果

demo.scss

$number: 70;
$number2: 71;


$numberPercent: 0.77;

$numberRound: 25.9;

$abs: 3;

/*number*/

.div {
    zoom:percentage($numberPercent);

    zoom:round($numberRound);

    zoom:ceil($numberRound);

    zoom:floor($numberRound);

    zoom:abs($abs);

    zoom:min($number,$number2);

    zoom:max($number,$number2);

    zoom: random(100);
}

/*list*/

$list:(1,‘p‘,3,4,5);
.div {
    zoom: length($list);//获取数组长度

    zoom: nth($list,2);//获取指定下标的元素

    @debug set-nth($list, 1 ,‘x‘);//替换指定下标的元素

    @debug join($list, (6,7,8));//拼接数组

    @debug append($list,‘999‘);//从数组尾部添加元素

    @debug index($list,‘p‘);//返回指定元素在数组中的位置
}

/*string*/
$string:‘hello‘;
$stringNo:hello;

$stringUP: ‘HELLO‘;
.div {
    background-image: unquote($string);//去除引号

    background-image: quote($stringNo);//添加引号

    background-image: str-length($string);//获取字符串长度

    @debug str-insert($string,‘p‘,2);//在指定位置插入字符

    @debug str-index($string,‘l‘);//返回指定字符在字符串中的位置

    background-image: to-upper-case($string);//转大写

    background-image: to-lower-case($stringUP);//转小写

}

/*map*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);
.div {
    width: map-get($map,top);//根据key获取相关值

    //map-merge($map1,$map2)
    //将两个map合并成一个新的map
    
    @debug map-remove($map,bottom);//从map中删除一个kep，返回一个新map

    @debug map-keys($map);//返回map中所有的key

    @debug map-values($map);//返回map中所有的value

    @debug map-has-key($map,abc);//判断map中是否有key对应的value值
}

@mixin foo($args...) {
    @debug keywords($args);
    //返回一个函数的参数，这个参数可以动态的设置key和value
}

@include foo($arg1:‘abc‘,$arg2:‘efg‘);


/*自定义函数*/
$rem1: 100px;
@function px2rem($px) {
    $rem: 37.5px;

    @debug $px;

    @return ($px/$rem) + rem;
};

.div {
    width: px2rem($rem1);
}

demo.css

@charset "UTF-8";
/*number*/
.div {
  zoom: 77%;
  zoom: 26;
  zoom: 26;
  zoom: 25;
  zoom: 3;
  zoom: 70;
  zoom: 71;
  zoom: 28; }

/*list*/
.div {
  zoom: 5;
  zoom: "p"; }

/*string*/
.div {
  background-image: hello;
  background-image: "hello";
  background-image: 5;
  background-image: "HELLO";
  background-image: "hello"; }

/*map*/
.div {
  width: 1px; }

/*自定义函数*/
.div {
  width: 2.6666666667rem; }

/*# sourceMappingURL=demo.css.map */

 

sass基础语法

标签：dex   rom   weight   嵌套   获取字符串长度   定位   引号   作用   app   

原文地址：https://www.cnblogs.com/chenyingying0/p/12241710.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！