sass混合器

混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。功能类似于编程语言的函数。

通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

//定义混合器
@mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}
//调用混合器
notice {background-color: green;border: 2px solid #00aa00;@include rounded-corners;
}//sass最终生成：
.notice {background-color: green;border: 2px solid #00aa00;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。

//定义含参数的混合器
@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
//再样式规则中调用含参的混合器
a {@include link-colors(blue, red, green);
}
//还可以通过语法$name: value的形式指定每个参数的值。
a {@include link-colors($normal: blue,$visited: green,$hover: red);
}

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，这个通过@extend语法实现

//通过选择器继承继承样式
.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}

sass混合器，选择器的继承相关推荐

前端学习笔记：CSS3选择器的继承、优先级和重要性
一.样式的继承 1.什么叫"继承"? 继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p ...
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
Sass学习笔记（一）
1 使用变量 $nav-color: #F90; nav {$width: 100px;width: $width;color: $nav-color; }//编译后nav {width: 100px ...
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
css less 不要作用到子对象_CSS-预处理语言Sass、Less简述
CSS作为前端开发的三驾马车之一,无时无刻不在影响着前端的发展.为了让 CSS 变得更加的好用,出现了一些预处理语言. 它们让 CSS 彻底变成一门可以使用变量 .循环 .继承 .自定义方法等多种特性 ...
Sass 你了解了吗
目录一.Sass是什么? 二.Sass特点三.为什么使用Sass 四.Sass语法格式五.Sass安装六.第一个Sass案例七.编译sass文件的方式 (1)使用sass命令行 (2)在开发 ...
Sass 3 的环境搭建及开发
目录简介安装 Ruby Sass koala Visual Studio Code 基本使用使用变量嵌套CSS规则导入Sass文件注释混合器媒体查询选择器继承简介 Sass是一个C ...
SASS的概念和使用
文章目录目录文章目录前言: 二.SASS的特点三.SASS语法格式四.SASS安装(VScode) 五.使用方法六.变量声明七.sass嵌套八.@import 与 Partials 九 ...
sass、scss、css、less
less.scss.sass都是CSS预处理器语言为什么要使用CSS预处理器? css缺点: (语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器: 没有变量和合理的样式复用机 ...
Sass、SCSS、less
定义 CSS 指层叠样式表 (Cascading Style Sheets). Sass (Syntactically Awesome StyleSheets),后缀名为.sass,是由ruby语言编 ...

sass混合器，选择器的继承

sass混合器

选择器继承

sass混合器，选择器的继承相关推荐

最新文章

热门文章