关于Sass的学习~

最新推荐文章于 2024-04-10 05:45:50 发布
最新推荐文章于 2024-04-10 05:45:50 发布
阅读量326 收藏
点赞数 1
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu_Cacakn/article/details/106539039
版权

自学的Sass，清内存,把自己学习时用的文档保存一下~

1 、 Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器, 避免了重复输入父选择器。

#main {
        p,div{
        color: blue;
        width: 100%;
        }
        .redbox {
        width: 100%;
        height: 50px;
        border: 1px soild red;
        background-color: #ff0000;
        }
    } 

/* 编译后： */
    #main p,#main div{
        color: blue;
        width: 100%;
    }
    #main .redbox {
        width: 100%;
        height: 50px;
        border: 1px soild red;
        background-color: #ff0000;
    }

2、 当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器,如果没有父选择器，则＆的值为空,因此可以在mixin中使用它来检测是否存在父选择器。

如果含有多层嵌套，最外层的父选择器会一层一层向下传递,若& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器。

当父选择器含有不合适的后缀时，Sass 将会报错。

    /* 编译前：*/
    a {
        font-weight: bold;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
            color: yellow;
        }
        body.main & {
        	font-weight: normal;
        }
    }
    #one {
        a {
            font-weight: bold;
            &:hover {
            	color: red;
            }
        }
        &-two {
        	color: blue;
        }
    }     

	/* 编译后： */
    a {
        font-weight: bold;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
        color: yellow;
    }
    body.main a {
    	font-weight: normal;
    }
    #one a {
    	font-weight: bold;
    }
    #one a:hover {
    	color: red;
    }
    #one-two {
    	color: blue;
    }

3、Sass 允许将属性嵌套在命名空间中,命名空间也可以包含自己的属性值。

比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。

.main{
	font:20px/24px {
		family: fantasy;
		size: 30em;
		weight: bold;
	}
}

4、占位符选择器 %，必须通过 @extend 指令调用。

@extend让你能够在多个选择器中通过继承的方式共享一段样式 。

/* 编译前：*/
.main {
	%abstract {
		color: red;
	}
	.main-element {
		@extend %abstract;
	}
}

/* 编译后： */
.main .main-element {
	color: red;
  }

5、多行注释 会被完整输出到编译后的 CSS 文件中

单行注释，编译后不会显示在css文件中

将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息

多行注释也可以输出变量值,但一般用不上

	
如：$version: "1.2.3";
	/* This CSS is generated by My Snazzy Framework version #{$version}. */
		


编译为：/* This CSS is generated by My Snazzy Framework version 1.2.3. */

6、变量 $:以美元符号开头，赋值方法与 CSS 属性的写法一样

直接使用即调用变量

嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）

将局部变量转换为全局变量可以添加 !global 声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
		/* 编译前 */
		/* #main {
			$color: red !global;
			color: $color;
		}
		#sidebar {
			color: $color;
		} */
		/* 编译后 */
		#main {
			color: red;
		}
		#sidebar {
			color: red;
		}
		</style>
	</head>
	<body>
		<p id="main">1234</p>
		<p id="sidebar">5678</p>
	</body>	
</html>

7、数据类型：数字、字符串、颜色、布尔型、空值、数组（空格或逗号作分隔符）、maps（相当于JS的object）

7·1 字符串，分有引号字符串和无引号字符串，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名
/*编译前*/
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

/*编译后*/
body.firefox .header:before {
  content: "Hi, Firefox users!";
}
7·2 数组

nth 函数可以直接访问数组中的某一项；
append 函数可以在数组中添加新值；
@each 指令能够遍历数组中的每一项。
数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。
用 () 表示不包含任何值的空数组，不可以直接编译成 CSS。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

8、运算

SassScript 支持布尔型的 and、or 以及 not 运算。
数组不支持任何运算方式，只能使用 list functions 控制。

8·1 数字运算：SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
p {width: 1in + 8pt;}

/*编译后*/
p {width: 1.111in; }

以下三种情况 / 将被视为除法运算符号：
值，或者值的一部分，是变量或者函数的返回值
值被圆括号包裹
值是算数表达式的一部分

p {
  font: 10px/8px;             // 纯CSS，无分割
  $width: 1000px;
  width: $width/2;            // 使用变量
  width: round(1.5)/2;        // 使用函数
  height: (500px/2);          // 值被圆括号包裹
  margin-left: 5px + 8px/2px; // 值是算数表达式的一部分
}

/*编译后*/
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用#{}插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/*编译后*/
p {font: 12px/30px; }
8·2 颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值.
数字与颜色值之间也可以进行算数运算，，同样也是分段计算的。
如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
/*编译前*/
p {
/*计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09*/
color: #010203 + #040506;
/*计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06*/
color: #010203 * 2;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

/*编译为*/
p {
color: #050709;
color: #020406;
color: rgba(255, 255, 0, 0.75);
}
8·3 字符串运算，+ 可用于连接字符串

如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
在有引号的文本字符串中使用#{}插值语句可以添加动态的值

p:before {
  content: "I ate #{5 + 10} pies!";
}

/*编译为：*/
p:before {
  content: "I ate 15 pies!"; }

9、插值语句 #{}

通过#{}插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/*编译为*/
p.foo {
  border-color: blue; }

10、变量定义 !default

在变量的结尾添加，可以给一个未通过!default声明赋值的变量赋值，变量是 null 空值时也将视为未被 !default 赋值。如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content-one: null;
$content-one: "Non-null content" !default;
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content-one: $content-one;
  content: $content;
  new-content: $new_content;
}

/*编译为*/
#main {
  content-one: "Non-null content";
  content: "First content";
  new-content: "First time reference";
}

11、通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http://开头；
文件名是 url()；
@import 包含 media queries。

/*导入的语句*/
@import "foo.scss";
/*或*/
@import "foo";
/*Sass 允许同时导入多个文件*/
@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

/*编译为*/
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@import 可以嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

12、Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

/*编译为*/
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
     	width: 500px; 
    } 
}

@media可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}


/*编译为*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

13、使用 @extend将一个选择器下的所有样式继承给另一个选择器。

.error {
  background-color: #fdd;
}
.seriousError {
  @extend .error;
 font-size:50px;
}

上面代码的意思是将.error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error,其他使用到 .error 的样式也会同样继承给 .seriousError。

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

.seriousError将包含.error与 .attention下的所有样式，后定义的样式享有优先权：.seriousError 的背景颜色是 #ff0 而不是 #fdd，因为 .attention 在 .error 之后定义。
多重延伸可以使用逗号分隔选择器名，比如 @extend .error, .attention; 与 @extend .error; @extend.attention 有相同的效果。

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个

.error {
  background-color: #fdd;
}
.aaa {
  @extend .error;
  font-size:50px;
}
.bbb {
  @extend .aaa;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

14、当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

p {color: green; }

15、@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动

这个指令包含两种格式：
1、@for $var from <start> through <end>
2、@for $var from <start> to <end>
区别在于：使用 through 时，条件范围包含 <start> 与 <end> 的值
使用 to 时条件范围只包含 <start>的值不包含<end>的值。
另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

这里再提一下@while，@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。

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

/*编译为*/
.item-3 {
  width: 6em; }

.item-2 {
  width: 4em; }

.item-1 {
  width: 2em; }

16、@each 将变量 $var 作用于值列表中的每一个项目,格式是 $var in 值列表。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

/*编译为*/
.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'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

17、混合指令的用法是在 @mixin 后添加名称与样式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
/*引用混合样式,是在@include后添加混合名称*/
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

/*编译为*/
large-text {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

注：混合样式中也可以包含其他混合样式，混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。
混合指令也可设置参数，引用指令时，按照参数的顺序，再将所赋的值对应写进括号

/*混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值，例如，这里的$style:dashed*/
@mixin sexy-border($color, $width,$style:dashed) {
  border: {
    color: $color;
    width: $width;
    style: $style;
  }
}
p { @include sexy-border(blue, 1px); }

/*编译为*/
p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed; }

18、Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用

$one-width: 40px;
$two-width: 10px;

@function three-width($n) {
  @return $n * $one-width + ($n - 1) * $two-width;
}

#sidebar { width: three-width(5); }

/*编译为*/
#sidebar {width: 240px; }
yu_Cacakn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sass的学习
weixin_43017712的博客
04-09 194
一、sass是什么东西？ Sass并不是其他的什么，而是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。 果然，概念就不是给人看的。用CSS预处理器可以让你的编码效率提高十倍。就是这样… 还有很多其他的CSS预处理器，比如： Sass（SCSS） LESS ...
sass最简教程，从入门到上手，简单易学
CRMEB小程序商城的博客
07-23 1668
以上就是sass的logo, 开始之前你首先得具备html和css的基本知识！ 什么是sass？ Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了.
sass语法总结，靠这份前端知识点PDF成功跳槽
最新发布
qq194582923的博客
04-10 570
多行注释/* */在编译的时候会保留，在使用gulp打包时 不会 保留强力注释/*！*/在编译和gulp打包时都会保留。
Sass教程，前端开发网上学习
2301_79099606的博客
04-04 689
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
Sass使用
weixin_44832362的博客
05-06 660
以上便是，我认为关于sass的一些常用知识点，暂时就记录这些，以后如果有其他常用的再继续补充。
Sass学习笔记.md
09-14
Sass学习笔记.md
sass:关于SASS的进阶学习
04-19
在“关于SASS的进阶学习”中，我们将深入探讨SASS的重要概念和实践技巧。 1. **变量（Variables）**：SASS允许我们定义变量存储颜色、尺寸、字体等值，方便在项目中多次使用。例如，`$primary-color: #007bff;`，...
Sass学习笔记-Sass快速入门04
01-08
文章目录一、Map与相关函数1.1定义Map类型数据1.2 map-get(参数1，参数2) 可以根据键来得到值1.3 map-keys(参数1) 返回对象当中的所有key1.4 map-values(参数1) 返回对象当中所有的value1.5 map-has-key(参数1,参数2...
SASS 零基础学习案例以及安装教程
02-25
**四、SASS学习案例** 1. **变量使用**：定义一个颜色变量 `$primary-color: #007bff;`，然后在样式中使用 `color: $primary-color;`。 2. **嵌套规则**：在`.container`类内部定义`.child`的样式，如 `.container...
4.8-sass学习-导入sass文件1
08-08
4.8-sass学习-导入sass文件1
Sass 详解
Mr_ZCheng的博客
11-13 4804
Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。 1、变量 变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。你可以在变量中存储颜色、字体 或任何CSS值，并在将来重复利用。Sass 使用$符号 作为变量的标志。例如： SCSS： $fon...
vue工作笔记
weixin_39399362的博客
04-25 99
vue学习笔记 路由跳转新的页面 let routeData = this.$router.resolve({name: 'serviceDetail',query: { evidenceId: this.message.evidenceId, } }) window.open(routeData.href, '_blank') v-html解析过滤器 $options.filters.date1(rightData.time) input框搜索
Sass学习
m0_65400139的博客
05-25 155
1. 变量（Variables） store information that you want toreuse throughout your stylesheet. ①变量声明使用$ 当变量定义在css规则块内或其他任何{...}内，那么该变量只能在此规则块内使用 ②变量引用 css生成时，变量会被它们的值所替代； 在声明变量时，变量值也可以引用其他变量； 变量名可以包括中划线和下划线，这两种方式的命名互通（用中划线声明的变量可以使用下划线的方式引用，反之亦然）；（也包括对混合器和Sas.
学习SASS，这一篇就足够了
subsistent的博客
01-27 146
在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。在一个文件中定义变量和混合器，在写css的时候文件比较混乱，所以通常会将变量和混合器放在单独的文件中，通过命令导入进来，这样每个文件中的代码都是同一类。sass的编译，最早的时候需要使用ruby语言的环境，后来使用python语言的环境也可以，现在，有很多工具都可以编译sass。使用node进行编译sass的时候，首先要安装sass包。sass文件的后缀分两种：.sass和.scss，相对来说，.scss使用的比较多。
【前端之Sass和Less（VScode）的混入、命名空间、继承语法区别】
qq_44735180的博客
12-08 634
作为一个未来专业的前端工程师我深知记录日常的学习和与IT界的大佬合作交流是多么有意义的一件事情，于是我带着前端SCSS和LESS知识与你们相遇了。
sass使用
weixin_30415801的博客
07-18 85
安装：npm install sass 引入：import ‘...sass||...scss’ 一．介绍：sass是对css的扩展，让css语言更加强大，优雅。它在css语法的基础上增加了变量，嵌套、混合、导入等高级功能。 二．功能介绍： 1.定义变量 1>变量的使用:变量以美元符号$开头，赋值方法与css属性的写法一样（如下） 2>全局变量，局部变...
Sass的基本使用
Joker_xin_的博客
02-22 383
1.基本的嵌套写法 #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 其编译结果就是 #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 2.特
Sass快速入门：
材女的进击
03-12 385
Sass中文网：https://www.sass.hk/guide/ 1. 使用变量 Sass使用$符号来标识变量。 栗子： $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected ...
Sass快速入门
@黄小泽的个人博客
12-25 1654
用过CSS3的都知道，CSS3没有变量，也不支持任何逻辑脚本。人总是很聪明的，随着需求的增加，Sass诞生，目的在于使样式支持逻辑脚本，使程序猿们更高效的写样式，Sass脚本经过编译后，最终会转换成.css文件。Sass脚本有两种格式，分别是.sass和.scss，这两种格式的区别在于：.sass不使用大括号和分号。由于.scss的写法与.css更加相似，所以通常我们都使用.scss格式。本篇博客
精通Sass的实战指南
在《实用 Sass 指南》中，作者 Michael和Hampton 提供了迄今为止最全面、最具思考的 Sass 学习资料。无论你使用何种服务器端技术，Sass 都可以无缝融入你的开发栈，以帮助你整理和优化 CSS 代码。书中的内容主要涵盖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值