SASS简介及使用方法

一、什么是Sass

Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具，它允许你使用变量、条件语句等，使开发更简单可维护。这里是官方文档。

二、基本语法

 1）变量

 sass的变量名必须是一个$符号开头，后面紧跟变量名。

//sass 样式
$red: #f00;
div {color: $red;   
}
// 编译为css后
div {color:#f00;   
}

特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如：

$top: top;
div {margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默认变量：仅需在值后面加入 !default即可， 默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值

$color: red;
$color: blue !default;
div {color: $color;    /* color:red; */
}

多值变量：多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象

list : 可通过空格，逗号或小括号分割多个值，使用 nth($变量名, $索引)取值

//一维数据
$px: 5px 10px 20px 30px;//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);// 例子
$px: 10px 20px;
div {margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map: 数据以key和value组成，格式：$map: (key1: value1, key2: value2); 通过map-get($map, $key); 

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}

2）计算功能

 sass允许使用算式。

div {padding: 2px * 4px;margin: (10px / 2);font-size: 12px   4px;    
}

　　

3）嵌套

标签嵌套

// sass 样式
div {color: #333;a {font-size:14px; &:hover {text-decoration:underline;}}
} // 编译后css
div {color: #333;
}
div a {font-size:14px; 
}
div a:hover {text-decoration:underline;
}

　　属性嵌套：

//sass 样式
.fakeshadow {border: {style: solid;left: {width: 4px;color: #888;}right: {width: 2px;color: #ccc;}}
}//css 编译后样式
.fakeshadow {border-style: solid;border-left-width: 4px;border-left-color: #888;border-right-width: 2px;border-right-color: #ccc; 
}

 4）注释

 sass有两种注释风格

标准css注释： /* 注释 */， 会保留到编译后的文件中，压缩则删除

单行注释： // 注释

在标准注释 /*后面加入一个感叹号，表示重要注释，压缩模式也会保留注释，用于版权声明等。

/*! 重要注释 */

5）继承

sass 中，选择器继承可以让选择器继承另一个选择器的所有样式

// sass样式
h1 {font-size:20px;
}
div {@extend h1;color:red;
}
// css编译后样式
h1 {font-size:20px;
}
div {font-size:20px;color:red;
}

使用占位符选择器 % 

从sass3.2.0后，就可以定义占位选择器%，这个的优势在于，不调用不会有多余的css文件

// sass样式
%h1 {font-size:20px;
}
div {@extend %h1;color:red;
}
// css编译后样式
div {font-size:20px;color:red;
}

　　

6）混合(mixin)

 sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...

//sass 样式
@mixin opacity($opacity:50) {opacity: $opacity / 100;filter: alpha(opacity=$opacity);
}.opacity{@include opacity;      //参数使用默认值  50/100 = 0.5
}
.opacity-80{@include opacity(80); //传递参数  80/100 = 0.8
}//  css编译后样式
.opacity{opacity: 0.5;filter: alpha(opacity=50);
}// ---------------------// 多参数
@mixin center($width, $height) {position: absolute;left:50%;top:50%;width:$width;height:$height;margin:(-$height / 2) 0 0 (-$width / 2);
}
div {@include center(200px, 100px);
}
// css编译后样式
div {position: absolute;left:50%;top:50%;width:200px;height:100px;margin:-50px 0 0 -100px;
}// -------------------//多组值
@mixin box-shadow($shadow...) {-webkit-box-shadow: $shadow;box-shadow: $shadow;
}
div {@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css编译后样式
div {-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}

@content：在sass3.2.0中引入， 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始

//sass 样式               
@mixin max-screen($res){@media only screen and ( max-width: $res ){@content;}
}@include max-screen(480px) {body { color: red }
}//css 编译后样式
@media only screen and (max-width: 480px) {body { color: red }
}

　　使用@content解决@keyframes关键帧的浏览器前缀问题

// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {@-webkit-keyframes #{$name} {$browser: '-webkit-'; @content;}@-moz-keyframes #{$name} {$browser: '-moz-'; @content;}@-o-keyframes #{$name} {$browser: '-o-'; @content;}@keyframes #{$name} {$browser: ''; @content;}
}// 引入
@include keyframes(scale) {100% {#{$browser}transform: scale(0.8);}
}// css编译后
@-webkit-keyframes scale {-webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {-moz-transform: scale(0.8);
}
@-o-keyframes scale  {-o-transform: scale(0.8);
}
@keyframes scale  {transform: scale(0.8);
}

　　

7）颜色函数

 sass提供了一些内置的颜色函数

lighten(#cc3, 10%)　　  // #d6d65c
darken(#cc3, 10%) 　　　// #a3a329
grayscale(#cc3) 　　　　// #808080
complement(#cc3) 　　　// #33c

　　

8）引入外部文件

使用 @import 命令引入外部文件， 引入后，可使用外部文件中的变量等。

@import "_base.scss";

　　

三、高级用法

1）函数 function

 sass允许用户编写自己的函数，以@function开始

$fontSize: 10px;
@function pxTorem($px) {@return $px / $fontSize * 1rem;
}
div {font-size: pxTorem(16px);
}
// css编译后样式
div {font-size: 1.6rem;
}

　　

 2）if条件语句

  @if语句可以用来判断

// sass样式
$type: monster;
div {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}
// css编译后样式
div {color: green;
}

　　三目判断：语法为 if($condition, $if_true, $if_false)。 三个参数分别表示： 条件，条件为真的值，条件为假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）循环语句

for循环有两种形式，分别为：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。

// sass样式
@for $i from 1 to 4 {.item-#{$i} {width: 2em * $i;}
}
// css编译后样式
.item-1 {width: 2em;
}
.item-2 {width: 4em;
}
.item-3 {width: 6em;
}

　　 while循环 

// sass样式
$i: 2;
@while $i > 0 {.item-#{$i} {width: 2em * $i;}$i: $i - 1;
}
// css编译后样式
.item-2 {width: 4em;
}
.item-1 {width: 2em;
}

　　

@each循环：语法为@each $var in <list or map>。 其中$var表示变量，而list和map表示数据类型，sass3.3.0新加入多字段循环和map数据循环

单字段list数据循环

//sass 样式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
}
//css 编译后样式
.puma-icon {background-image: url('/images/puma.png'); 
}
.sea-slug-icon {background-image: url('/images/sea-slug.png'); 
}
.egret-icon {background-image: url('/images/egret.png'); 
}

　　 多字段list数据循环

//sass 样式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');border: 2px solid $color;cursor: $cursor;}
}
//css 编译后样式
.puma-icon {background-image: url('/images/puma.png');border: 2px solid black;cursor: default; 
}
.sea-slug-icon {background-image: url('/images/sea-slug.png');border: 2px solid blue;cursor: pointer; 
}

　　多字段map数据循环

//sass 样式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}
//css 编译后样式
h1 {font-size: 2em; 
}
h2 {font-size: 1.5em; 
}
h3 {font-size: 1.2em; 
}

　　

本文转载于:猿2048➯https://www.mk2048.com/blog/blog.php?id=ibihh0j&title=SASS简介及使用方法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/370696.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【转】Java方向如何准备BAT技术面试答案(汇总版)

【转】Java方向如何准备BAT技术面试答案(汇总版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 这个主题的内容之前分三个篇幅分享过&#xff0c;导致网络上传播的比较分散&#xff0c;所以本篇做了一个汇总&#xff0c;同时对部分内容及答案做了修改&#xff0c;欢迎朋友们吐槽、转发。因为篇幅长度和时间的原…
阅读更多...
numpy维度交换_“lazy”的transpose()函数——从numpy 数组的内存布局讲起

numpy维度交换_“lazy”的transpose()函数——从numpy 数组的内存布局讲起

1 数组的两种内存布局方式行优先与列优先首先我们回顾一下&#xff0c;矩阵数据在内存中的两种布局方式&#xff1a;行优先&#xff08;row-major&#xff09;&#xff1a;以行为优先单位&#xff0c;在内存中逐行存储/读取&#xff1b;对于多维&#xff0c;意味着当线性扫描内…
阅读更多...
云耀服务器切换系统,【计算】云耀服务器-常见操作汇总指南

云耀服务器切换系统,【计算】云耀服务器-常见操作汇总指南

通过上期的介绍&#xff0c;相信大家对于云耀云服务器的基本知识有了一个了解。云耀云服务器是一个具备独立、完整的操作系统和网络功能&#xff0c;可快速搭建简单应用的新一代云服务器。接下来&#xff0c;本期为大家带来关于云耀云服务器使用中的一些简单方法和小技巧。1.云…
阅读更多...
机器学习应该准备哪些数学预备知识？

机器学习应该准备哪些数学预备知识？

转 https://www.zhihu.com/question/36324957 https://www.zhihu.com/question/36324957/answer/139408269 机器学习应该准备哪些数学预备知识&#xff1f; 数据分析师&#xff0c;工作中经常使用机器学习模型&#xff0c;但是以调库为主。 自己一直也在研究算法&#xff0c;也…
阅读更多...
react usecontext_Vue3原理实战运用，我用40行代码把他装进了React做状态管理

react usecontext_Vue3原理实战运用，我用40行代码把他装进了React做状态管理

前言vue-next是Vue3的源码仓库&#xff0c;Vue3采用lerna做package的划分&#xff0c;而响应式能力vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中&#xff0c;可行吗&#xff1f;来试一试吧。使用示例话不多说&#xff0c;先看看怎么用的解解馋吧…
阅读更多...
Spring MVC –自定义RequestMappingHandlerMapping

Spring MVC –自定义RequestMappingHandlerMapping

在xml bean定义文件中使用<mvc&#xff1a;annotation-driven />配置Spring MVC时&#xff0c;在内部将一个名为RequestMappingHandlerMapping的组件注册到Spring MVC。 该组件或通常是HandlerMapping组件负责将请求URI路由到处理程序&#xff0c;这些处理程序是使用Requ…
阅读更多...
css的三个特性 背景透明设置

css的三个特性 背景透明设置

关于行内元素&#xff08;补充一点&#xff09; 行内元素只能容纳文本或其他行内元素。&#xff08;a特殊a里面可以放块级元素&#xff09; 例子&#xff1a; 关于行高tip: 选择器的嵌套层级不应大于3级&#xff0c;位置靠后的限定条件应尽可能的精确。 属性定义必须另起一行…
阅读更多...
比较容易犯的一些智障错误（不定时修改）

比较容易犯的一些智障错误（不定时修改）

无论在什么学习中&#xff0c;在成长的过程中&#xff0c;注定要犯一些错误&#xff0c;有些比较高级的错误&#xff0c;有些是比较智障的错误。那么在oi的学习中&#xff0c;我们最讨厌的就是一些智障的小错误&#xff0c;因为如果是大错误的话一般情况下在测试样例的时候都是…
阅读更多...
ccs安装多版本编译器离线_大数据分析：学习工具JDK，在线安装指南

ccs安装多版本编译器离线_大数据分析：学习工具JDK，在线安装指南

hadoop是使用Java语言开发的并且Hadoop运行需要有Java环境的支持&#xff0c;因此在安装hadoop之前需要安装Java开发环境即JDK(Java Development Kit)。安装前首先向大家介绍以一下本文会用到的几个词&#xff1a;JAVA_HOME:一是为了方便引用&#xff0c;比如&#xff0c;JDK安…
阅读更多...
HTML基础入门学习准备篇

HTML基础入门学习准备篇

在学习前端的开始&#xff0c;让我们一起来了解什么是HTML5时代的大前端开发和全栈开发的定义传统的前端&#xff1a;切图-标签和样式-实现效果H5时代的前端&#xff1a;一、需要各端的兼容开发二、可以用于APP开发和移动站点的开发三、Ajax服务器端技术开发四、高级设计模式和…
阅读更多...
asp.net尚未在web服务器上注册_最新版Web服务器项目详解 00 项目概述

asp.net尚未在web服务器上注册_最新版Web服务器项目详解 00 项目概述

点 击 关 注 上 方&#xff02;两猿社&#xff02;设 为&#xff02;置 顶 或 星 标&#xff02;&#xff0c;干 货 第 一 时 间 送 达。互 联 网 猿 | 两 猿 社TineyWebServerLinux下C轻量级Web服务器&#xff0c;助力初学者快速实践网络编程&#xff0c;搭建属于自己的服务器…
阅读更多...
python正则r的作用_Python正则表达式，这一篇就够了！

python正则r的作用_Python正则表达式，这一篇就够了！

原标题&#xff1a;Python正则表达式&#xff0c;这一篇就够了&#xff01;大多数编程语言的正则表达式设计都师从Perl&#xff0c;所以语法基本相似&#xff0c;不同的是每种语言都有自己的函数去支持正则&#xff0c;今天我们就来学习 Python中关于 正则表达式的函数。re模块…
阅读更多...
服务器微信了早上好,每天早上好的问候语 微信早安问候语合集66句

服务器微信了早上好,每天早上好的问候语 微信早安问候语合集66句

1、没有伞的孩子&#xff0c;必须努力奔跑&#xff01;早安&#xff01;2、你不能改变过去&#xff0c;但你可以改变未来。早安&#xff01;3、坚持了才叫梦想&#xff0c;放弃了就只是妄想。早安&#xff01;4、忘掉失败&#xff0c;不过要牢记失败中的教训。早安&#xff01;…
阅读更多...
如何得到某个文件的旧版本

如何得到某个文件的旧版本

下载某个文件的旧版本 如果想要得到某个文件的旧版本&#xff0c;只需在该文件上单击右键&#xff0c;选择Updata to revision…即可。 系统会提示输入版本号。 例如要下载soc_1的第五个版本&#xff0c;只需填入5即可。如图7。 查看完版本5的文件后&#xff0c;如果想在此回到…
阅读更多...
Google Guava EventBus和Java 7 WatchService用于事件编程

Google Guava EventBus和Java 7 WatchService用于事件编程

这篇文章将介绍如何使用Guava EventBus将更改发布到Java 7 WatchService检测到的目录或子目录中。 Guava EventBus是向应用程序添加发布/订阅通信的好方法。 Java 7 java.nio.file软件包中新增的WatchService用于监视目录中的更改。 由于EventBus和WatchService已在以前的文章中…
阅读更多...
Bootstrap-table 部分浏览器显示不出来

Bootstrap-table 部分浏览器显示不出来

一、问题 近日&#xff0c;写了一个ASP.Net项目&#xff0c;但是bootstrap-table在别人的电脑上显示不出来&#xff0c;在自己的电脑上能显示&#xff0c;有些浏览器也是能显示&#xff0c;但部分浏览器就是显示不出来。找了很多原因&#xff0c;最后有个老师和我说是内核版本的…
阅读更多...
DBMS-基本概念

DBMS-基本概念

文件处理系统&#xff08;file-processing system&#xff09;的主要弊端&#xff1a; 数据冗余和不一致&#xff08;data redundancy and inconsistency&#xff09;、数据访问困难&#xff08;difficulty in accessing data&#xff09;、数据孤立&#xff08;data isolation…
阅读更多...
python多大孩子可以学_孩子学编程最佳年龄是多大

python多大孩子可以学_孩子学编程最佳年龄是多大

儿童编程教育已经悄悄地掀起了编程低龄化的热浪。但是很多人会疑惑&#xff0c;到底孩子学编程最佳年龄是多少呢&#xff1f;下面小编就为大家解答一下。孩子学编程最佳年龄 首先&#xff0c;孩子的学习黄金时期是非常重要的。从6岁开始&#xff0c;大多数孩子都可以掌握对基本…
阅读更多...
上传文件到华为云云服务器,上传文件到云服务器

上传文件到华为云云服务器,上传文件到云服务器

上传文件到云服务器 内容精选换一换登录Windows操作系统的弹性云服务器时&#xff0c;需使用密码方式登录。因此&#xff0c;用户需先根据创建弹性云服务器时使用的密钥文件&#xff0c;获取该弹性云服务器初始安装时系统生成的管理员密码(Administrator帐户或Cloudbase-init设…
阅读更多...
JUnit规则

JUnit规则

第一次偶然发现JUnit Rule批注时&#xff0c;我对此概念有些恼火。 在测试用例中拥有一个公共领域似乎有些奇怪&#xff0c;因此我不愿意定期使用它。 但是一段时间后&#xff0c;我习惯了这一点&#xff0c;事实证明&#xff0c;规则可以通过多种方式简化编写测试的过程。 这篇…
阅读更多...
最新文章

Copyright @ 2022~2023