Sass学习之 Sass语法入门--5.占位符%

5.占位符%

只有通过@extend调用才会产生代码，不然不会有任何影响

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译后

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}
时间： 2024-10-14 13:59:02

Sass学习之 Sass语法入门--5.占位符%的相关文章

Sass学习之 Sass语法入门--3.混合宏

3.混合宏 混合宏的作用: 相当于把复杂的变量声明集中在一起,免去了单个变量的调用. 声明:@mixin border{} 调用:@include border; 混合宏的分类: 不带参数: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 带参数: //默认有值@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; bord

SASS学习笔记2 —— 语法

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种是scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 所有的sass导入文件都可以忽略后缀名.scss.一般来说基础的文件命名方法以_开头,如_mixin.scss.这种文件在导入的时候可以不写下划线,可写成@import "mixin". 被导入sass文件a.scss: body { background: #

Sass之继承，混合宏，占位符的用法总结

Sass强大的功能,受到web前端开发人员的各种青睐. 混合宏的用法,关键字@mixin,声明带参数的函数,在有需要的地方通过@include调用这一函数值 //SCSS中混合宏使用@mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); }} .header { color: orange; @include mt(5px); span{ dis

Sass之混合宏、继承、占位符

1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数混合宏两种. 1.1 不带参数混合宏的声明要使用关键词@mixin.例如: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @medi

Sass学习之 Sass语法入门--6.插值#{}

6.插值#{} 将预备好的值放进#{“预备好的值”}这里面 @mixin sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include sizes("header", 12px, 20px, 40px); //CSS

Sass学习笔记--基本语法

Sass基本要求 通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格 不带有任何的分号和大括号 称为 Sass 老版本,其文件名以".sass"为扩展名 问题 习惯在js和css中使用括号的我们,在Sass中没看到类似 CSS 中的大括号和分号. 这种语法格式对于前端人员都不太容易接受,而且容易出错. Scss基本要求 从外形上来判断他和 CSS 长得几乎是一模一样 代码都包裹在一对大括号里,并且末尾结束处都有一个分号 其文件名格式常常以".scss"

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass学习笔记（四）：混合宏VS继承VS占位符

混合宏主要用来传递参数,但sass编译相同的混合宏时,不会将相同的样式合并.会产生冗余代码. 继承主要用于不需要传递参数的场合,且已经存在基类,编译后会将相同的样式合并,不足:不论基类是否被调用,已经声明的基类都会产生代码. 占位符与继承类似,但是没有被调用的占位符不会产生代码.

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C