安科网

sass基础语法

nicepainkiller

nicepainkiller

2020-01-29

关注 关注

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 css

nicepainkiller

nicepainkiller

0 关注 3 粉丝 0 动态

关注 关注

相关推荐

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode 2020-10-28

CSS之Sass入门

大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展

teresalxm 2020-06-05

解决windows下node-sass安装失败和版本过高的问题

vue中使用scss时报错sass-loader版本过高

覆雪蓝枫 2020-06-02

HubilderX中编译sass文件

　　sass环境已搭建成功。　　HbuilderX插件已安装scss/sass编译。　　.scss文件右键--》外部命令/插件--》sass--》编译sass/scss. 成功后控制台输出成功提示：Wrote CSS to /...文件路径，默认在当前文件

沈宫新 2020-05-28

sass-安装

　　　　　　 勾选 Add Rbby executables to your PATH添加到系统环境变量。如果想在 css 文件夹下生成对应的css 文件 就在终端键入命令: sass ./sass/a.sass ./css/a.css

dazhifu 2020-05-19

vue配置sass全局样式

$color-red:red;$color-yellow: yellow;$color-white: white;$color-light-gray: #F5F5F5;},

buttonChan 2020-05-10

没你想象的那么难！深度剖析三款最实用的css预处理器

css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Less优缺点1.作为目前最流行的css预处理器之一的less，可谓是Sass最强劲的对手，诞生

nicepainkiller 2020-02-23

导入sass文件

sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。1sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件

vavid 2020-02-15

Allenmind‘s Blog

听说，Sass和Compass更配哟。来看看Compass的基本用法！之前写了一篇关于Sass基本用法的文章。Sass可以加快CSS的编写效率，让CSS的开发变得更加简单和可维护。但是，想要发挥Sass的全部功力，就需要配合Compass一起使用。Comp

tianzyc 2020-02-01

sass css样式：@for循环、样式变量与#{} 变量插值

$sizei:$i*7.5;$sizej:$j*7.5;top:#{$sizei}vw;left:#{$sizej}vw;$sizen:$n*7.5;top:#{$sizei}vw;left:#{$sizen}vw;};$sizei:$i*7.5;$siz

dazhifu 2020-01-25

mac下安装sass

mac虽然装好Ruby，但是我执行：。我这种小白只能：

octopusnju 2013-05-13

vue-cli3 搭建vue项目

你会被提示选取一个 preset（预设）。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产

CaiKanXP 2020-01-08

IT兄弟连 HTML5教程 初识Sass 小结及习题

Sass完全兼容CSS语法，并且添加了一些编程的特性，编写的Sass代码在编译之后最终生成的是CSS文件。Sass具有维护性高、可扩展性强、复用性高的优点，提高我们的编码效率。Sass是使用Ruby语言编写的，Sass的运行是依赖于Ruby环境的，所以在安

葉無聞 2019-12-30

浅谈Css、less和Sass（SCSS）

想必大家学习CSS的时候一定接触过LESS和SASS吧，但可能还是有很多朋友对他们的概念模糊，下面不妨就跟着一起了解一下关于它们的故事。为了方便前端开发的工作量，出现了sass和less。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变

waterv 2019-12-27

直击css系列----Css、less和Sass（SCSS）

CSS是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少

福叔 2019-12-27

IT兄弟连 HTML5教程 初识Sass Sass基本语法

本文重点在于HTML5与CSS3的学习和使用，HTML与CSS不属于编程范畴，更偏向于设计，而Sass是编程化的CSS的扩展语言，对于没有接触过编程的读者可能会有点吃力，这里不做对语法详细介绍，仅作为基本介绍，让读者了解Sass的优越性，如果对Sass感兴

swiftwwj 2019-12-27

IT兄弟连 HTML5教程 初识Sass Sass的使用和编译

Sass作为一门具有编程性质的CSS扩展语言，它具有独立的文件名称，因为其历史原因，它的后缀名可以有两个选择，分别为sass和scss，其中sass的编写格式不符合CSS编程语法规范，其不能使用大括号和分号，需要的严格的缩进来做定界。compact模式保留

MaureenChen 2019-12-26

学习Sass

Sass中文文档。Sass百度百科

zengni 2019-12-15

sass使用（浅解）

基于css的缺点，因此在写项目时需要用sass来写。sass有两种语法，分别是以 .sass、 .scss为扩展名。前者诞生于07年，是最早也最成熟的css预处理器。scss是sass3所引入的，其语法完全兼容css3，并且继承了sass的强大功能，scs

MaureenChen 2019-12-01

分享一个vue项目脚手架项目

源于公司每次新启动一个由多人协同开发的项目都由负责人初始化项目之后，每个人再去从私服pull一下项目才开始开发。@import './mixin.scss'; // 公共函数@import './icomoon.css'; //字体图标@import

juzhengqian0 2019-11-19
nicepainkiller

nicepainkiller

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号