scss常见用法_scss常用-程序员宅基地

技术标签: css  

简介

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法(或者 Sass),它受到了Haml的简洁精炼的启发,它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号,分号,它使用 行缩进 的方式来指定css 块,虽然sass不是最原始的语法,但是缩进语法将继续被支持,在缩进语法的文件以 .sass 为拓展名。

注释

有三种形式:

(1)//comment:该注释只是在.scss源文件中有,编译后的css文件中没有。

(2)//:重要注释,任何style的css文件中都会有,一般放置css文件版权说明等信息。

(3)/ /:该注释在compressed的style的css中没有,其他style的css文件都会含有。

Quick Start

Installation

Build

1.切换到.scss文件所在目录

命令行下切换到代码文件夹目录(如Z:\),假设有文件test.scss文件,里面内容如下:(SASS完全支持css语法)

h1{
   
    font-size:17px;    
}
h2{
   
    font-size:18px;
}

2.编译scss文件为css文件

  运行命令:sass --style compressed test.scss test.css,即可生成压缩版的css文件,并且命名为test.css。几点说明:

(1)--style 后面可以有四个参数可选,分别为expanded、nested、compact、compressed,分别选用不同参数的效果可以自己尝试体验。

(2)test.scss和test.css文件目录可以自定义,例如把Z盘sass目录下的test.scss文件编译为压缩版的文件,并放置在Z盘css目录下,那么命令即:sass --style compressed z:\sass\test.scss z:\css\test.css

(3)开发过程中,只需要修改scss文件,然后编译;前端页面只需要引用相应的css文件即可。

3.侦听文件和文件夹

如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。

(1)侦听文件:

sass --watch --style compressed test.scss:test.css

当test.scss文件有修改后,会自动编译为test.css,并且是compressed的。

(2)侦听文件夹:

sass --watch --style compressed sass:css

当sass文件夹下.scss文件有修改的时候,会自动编译为与sass中文件同名的css文件。

 备注:

(1)注意源文件和目标文件之间是冒号,与编译命令中为空格不同。

(2)生成的map文件可以查找source map文件的作用。

Webpack

Webpack中也内置了sass-loader,通过简单的配置既可以使用。不过需要注意的是,Webpack的sass-loader还是依赖于node-sass以及sass(gem),所以如果安装sass-loader报错可以先尝试安装sass。

变量与选择器

变量

定义

变量的定义一般以$开头,某个变量的作用域仅限于他们定义的层级以及子层级。如果变量是定义在所有嵌套选择器之外的,那么他们可以在各处被调用。

$color1:#aeaeae;
.div1{
   
    background-color:$color1;
}

编译后:

.div1 {
   
  background-color: #aeaeae;
}
/*# sourceMappingURL=test.css.map */

如果希望某个在子选择器中定义的变量能够成为全局变量,可以使用!global关键字:

复制代码
#main {
   
  $width: 5em !global;
  width: $width;
}

#sidebar {
   
  width: $width;
}
复制代码

嵌套引用

嵌套引用在其他编程语言中即是字符串插值,需要用#{}进行包裹:

$left:left;
.div1{
   
    border-#{$left}-width:5px;
}

变量计算

Sass中也是支持对于变量进行简单的计算:

$left:20px;
.div1{
   
    margin-left:$left+12px;
}

变量可以支持计算的类型,还是比较多的:

复制代码
p {
   
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}
复制代码

选择器

嵌套

复制代码
.div1{
   
    .span1{
        height: 12px;
    }
    .div2{
   
        width: 16px;
    }
}
复制代码

属性也可以嵌套,比如border-color属性,可以写成:

  p {
   
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。

父元素引用

在嵌套的子层级中,允许使用&引用父元素:

.div1{
   
    &:hover{
        cursor: hand;
    }
}

代码重用

继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

复制代码
.class1{
   
    font-size:19px;
}
.class2{
   
    @extend .class1;
    color:black;
}
复制代码

注意:如果在class2后面有设置了class1的属性,那么也会影响class2,如下:

复制代码
.class1{
   
    font-size:19px;
}
.class2{
   
    @extend .class1;
    color:black;
}
.class1{
   
    font-weight:bold;
}
复制代码

由此可以看出Scss也是递归编译的。

引用外部css文件(Partials)

有时网页的不同部分会分成多个文件来写样式,或者引用通用的一些样式,那么可以使用@import。

@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

Mixin&Include

Mixin有点像C语言的宏(macro),是可以重用的代码块。

使用@mixin命令,定义一个代码块。

  @mixin left {
   
    float: left;
    margin-left: 10px;
  }

使用@include命令,调用这个mixin。

  div {
   
    @include left;
  }

参数与缺省值

  • 边距设置

复制代码
@mixin common($value1,$value2,$defaultValue:12px){
   
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
   
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
   
    font-size:16px;
    @include common(12px,13px);
}
复制代码
  • 浏览器前缀设置设置

下面是一个mixin的实例,用来生成浏览器前缀。

  @mixin rounded($vert, $horz, $radius: 10px) {
   
    border-#{$vert}-#{
   $horz}-radius: $radius;
    -moz-border-radius-#{
   $vert}#{
   $horz}: $radius;
    -webkit-border-#{
   $vert}-#{
   $horz}-radius: $radius;
  }

使用的时候,可以像下面这样调用:

  #navbar li {
    @include rounded(top, left); }
  #footer {
    @include rounded(top, left, 5px); }

编程式方法

流程控制

条件语句

@if可以用来判断:

  p {
   
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 {
    border: 2px dotted; }
  }

配套的还有@else命令:

  @if lightness($color) > 30% {
   
    background-color: #000;
  } @else {
   
    background-color: #fff;
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
   
    .border-#{$i} {
   
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;
  @while $i > 0 {
   
    .item-#{$i} {
    width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
   
    .#{$member} {
   
      background-image: url("/image/#{$member}.jpg");
    }
  }

函数

Sass允许用户自定义函数,原型如下所示:

复制代码
  @function double($n) {
   
    @return $n * 2;
  }

  #sidebar {
   
    width: double(5px);
  }
复制代码

颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

  lighten(#cc3, 10%)  // #d6d65c
  darken(#cc3, 10%)  //  #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/leadn/article/details/78562873

智能推荐

BZOJ 3631 松鼠的新家-程序员宅基地

文章浏览阅读269次。题意: 有一棵树,n个节点,从a1出发->a2->a3->…->an,(a为一个排列),每经过一个节点时,该节点加一,问最终每个节点的值 思路: 类似差分,lca(u,v)+1,u-1,v-1,从上往下统计答案就可以了 u+1,v+1,lca(u,v)-1,fa[lca[u,v]]-1,从下往上扫描#include#include#

SUMO入门(三) - 路网_sumo 路网-程序员宅基地

文章浏览阅读9.5k次,点赞4次,收藏25次。SUMO入门(三) - 路网SUMO network file 网络文件描述了交通相关的地图、道路和交叉口。虽然XML文件我们可读,但SUMO网络文件并不是手工编辑的。您可以将SUMO XML描述文件与NETCONVERT一起使用;您还可以使用NETCONVERT以各种格式转换现有地图;或使用NETGENERATE生成几何简单的抽象路线图。要修改现有的 .net.xml 文件,您可以使..._sumo 路网

编译android源码报错:build/envsetup.sh: 1: Syntax error: "(" unexpected_./envsetup.sh: 1: syntax error: "(" unexpected-程序员宅基地

文章浏览阅读1.1k次。编译android源码报错:build/envsetup.sh: 1: Syntax error: "(" unexpected编译android源码时报错:build/envsetup.sh: 1: Syntax error: "(" unexpected解决方法:执行$sudo dpkg-reconfigure dash命令,并选择“否”_./envsetup.sh: 1: syntax error: "(" unexpected

2021-07-02 swift大礼包-程序员宅基地

文章浏览阅读5.5k次,点赞3次,收藏5次。全面的Swift学习资料整理_walkerwqp的博客-程序员宅基地 全面的Swift学习资料整理 ...

ImageView 使用详解-程序员宅基地

文章浏览阅读1.7w次,点赞3次,收藏82次。极力推荐文章:欢迎收藏Android 干货分享本篇文章主要介绍Android开发中的部分知识点,通过阅读本篇文章,您将收获以下内容:一、ImageView 的继承关系二、ImageView 常用方法三、ImageView 背景 间距属性设置四、使用Bitmap 类型动态设置ImageView 资源五、ImageView 图片倒影实现六、ImageV..._imageview

目前市场上的电脑一体机从计算机种类,一体机电脑与普通电脑的区别-程序员宅基地

文章浏览阅读639次。现在,市场上开始流行一体机电脑了,很多网友可能会对一体机电脑感兴趣。下面,本文针对市场上的一体机电脑优劣作一个简要说明。一、一体机电脑的好处由于一体机电脑,所有的设备都封装在同一个容器内,就连显示屏都和电脑的设备融为一体了。因此,一体电脑的放置、携带,是相当的方便。它的好处就是方便放置,放哪里都行,因为不占空间。二、一体机电脑的弊端由于一体机电脑把传统的机箱内的所有设备和显示屏,都合为一体了,可见..._企业版一体机与普通一体机的区别

随便推点

Vb.net 调用Codesoft-LabelManager2 打印标签_vb.net打印标签-程序员宅基地

文章浏览阅读4.6k次。最近在用VB.net 做一个项目,其中一项就是标签打印,用了好多种方法,都不怎么理想,1.Zebra zpl 命令这个方法最有效,但2D条形码搞不定。希望能搞定的朋友分享一下... 还有就是同一程序用在多台打印机如果打印机分辨率不同,品牌不同都不能打印。2.Bartender开发太贵,老板让省钱...3.zebraDesigner不能在vb.net 下调用开发...最后决_vb.net打印标签

ble芯片 全称_一文看懂BLE芯片竞争格局-程序员宅基地

文章浏览阅读1.4k次。无线通信技术主要分广域网和局域网两种,差别在传输距离和通信协议方面。局域网无线通信技术包括NFC、IrDA、WIFI、蓝牙、ZigBee、Z-Wave、UWB、RFID、LiFi等,传输一般在0-300米;广域网无线通信技术包括GPRS、LoRa、NB-IoT等,有效传输距离在公里级。蓝牙是最主要的局域网(短距离)无线通信方式之一,适合覆盖距离在百米以内、数据传输量较小的通信。蓝牙实现功耗、成本、..._ble soc芯片跟纯ble

台大李宏毅《机器学习》2021课程撒花完结!除了视频、PPT,还有人汇编了一本答疑书...-程序员宅基地

文章浏览阅读530次。点击 机器学习算法与Python学习 ,选择加星标精彩内容不迷路机器之心报道今年 2 月末,「精灵宝可梦大师」李宏毅的《机器学习》最新一期课程正式开课。对于想要入门机器学习的同学来说,这是..._李宏毅ppt机器学习书

YOLOv5(ultralytics) 训练自己的数据集,VOC2007为例_ultralytics能训练sam吗-程序员宅基地

文章浏览阅读3.8k次,点赞4次,收藏40次。官方教程:https://github.com/ultralytics/yolov5/wiki/Train-Custom-DataVOC格式数据1.在yolov5目录下创建VOC2007文件夹,有VOC2007 …Annotations # 存放图片对应的xml文件 …JPEGImages # 存放图片 …ImageSets/Main #之后会在Main文件夹内自动生成train.txt,val.txt,test.txt和trainval.txt四个文件,存放训练集、验证集、测试集图片的名_ultralytics能训练sam吗

单词薄-java程序设计课程-成功-derby安装_apache derby安装-程序员宅基地

文章浏览阅读619次,点赞2次,收藏6次。http://www.mamicode.com/info-detail-1597112.html一、首先按照这个网址,干了一遍。下载了derby。设置了环境变量和系统变量。————————————————————————————1,首先下载Derbyhttp://db.apache.org/derby/derby_downloads.html技术分享下载最新版本 db-derb..._apache derby安装

GameFramework框架详解之 框架总览_gameformwork讲解-程序员宅基地

文章浏览阅读1.5w次,点赞23次,收藏73次。一.前言目前市场上有很多优秀个开源框架,比如ET,GameFramework,DBFramework,StrangeIOC,Loxodon-Framework,KSFramework,xluaFramework等等。其中要说规范的话,不得不说GameFramework还是不错的,当然很多新手看到后会觉的有点复杂,写一个小小的功能,不得不套用一堆东西,继承一堆接口,感觉不知所措,不能随心所欲的去撸代码。其实这个框架就是为了约束新手的行为的,让我们面向接口编程,遵循“开闭”的设计原则来写代码,方便后期的扩_gameformwork讲解

推荐文章

热门文章

相关标签