首页 > > 网页制作 > css >

sass基础语法

2020-01-29 16:01:11来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

sass基础语法

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 */

 


原文链接:https://www.cnblogs.com/chenyingying0/p/12241710.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Sass环境安装-Sass sublime 编辑器插件编译方法

下一篇：博客前端其他杂项

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签