sass文档摘记

2024-06-07 00:32
文章标签 文档 sass 摘记

本文主要是介绍sass文档摘记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

过了一遍sass文档,自己过滤了一些觉得不太推荐使用的内容,记录下以前不知道的内容
下文中例子都摘自https://www.sass.hk/docs/

1.变量

$nav-color: #F90;
nav {$width: 100px;width: $width;color: $nav-color;
}

变量可以引用别的变量
中划线和下划线是互通的,也就是说,$a_b$a-b是同一个变量,最好不要使用这个规则
变量默认值,$fancybox-width: 400px !default;
!global可以将局部变量转换为全局,最好不要用
#{}引用的变量将编译为无引号字符,可以避免运行运算符

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

2.嵌套

属性也可以嵌套,但是个人觉得别用为好

nav {border: 1px solid #ccc {left: 0px;right: 0px;}
}

3.@import

不同于css,sass在生成css时就会把文件导入
局部文件的文件名以下划线开头,局部文件,不需要单独生成css的文件,比如themes/_night-sky.scss,这样导入@import “themes/night-sky”;
导入文件也可以嵌套,.blue-theme {@import “blue-theme”}
包含media queries,@import仅作为普通的CSS语句,http://开头,url()地址,也是一样
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

4.mixin

mixin可以传参

@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
a {@include link-colors(blue, red, green);
}//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }// 这样写可以忽略传参的顺序
a {@include link-colors($normal: blue,$visited: green,$hover: red);
}// 这样写可以给参数赋默认值
@mixin link-colors($normal,$hover: $normal,$visited: $normal)
{color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}// 不定参数
@mixin box-shadow($shadows...) {box-shadow: $shadows;
}
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 另一种情况
@mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {@include colors($values...);
}

@content用来传递mixin的内容

@mixin apply-to-ie6-only {* html {@content;}
}
@include apply-to-ie6-only {#logo {background-image: url(/logo.gif);}
}
//输出
* html #logo {background-image: url(/logo.gif);
}// @content的变量值是@include定义的时候值
$color: white;
@mixin colors($color: blue) {background-color: $color;@content;border-color: $color;
}
.colors {@include colors { color: $color; }
}
// 输出
.colors {background-color: blue;color: white; // 注意这里border-color: blue;
}

@content的目的,使用media-queries,animation的keyframes等块内容的时候

@mixin keyframes($name){ @keyframes #{$name} { @content; } 
} 
@include keyframes(show){ 0% { opacity:0; } 100% { opacity:1; } 
}

@mixin 可以用 = 表示, @include 可以用 + 表示

5.extend

慎用,尤其对于后代选择器

.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}// 下面这句将会应用到.seriousError a,尤其需要注意
.error a{  color: red;font-weight: 100;
}
// 也就是说生成后是这样的
.error a, .seriousError a {color: red;font-weight: 100; 
}// %作为占位符
#context a%extreme {color: blue;
}
.notice {@extend %extreme;
}
// 输出
#context a.notice {color: blue;
}// 听说这种情况使用%占位比mixin要好,但是%的块里面是不可以用&的,使用了也不会生效
// 参考http://www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html
%bg-image { width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat;
} 
.image-one { @extend %bg-image; background-image:url("/img/image-one.jpg");
} 
.image-two { @extend %bg-image; background-image:url("/img/image-two.jpg");
}

在指令中使用 @extend 时,必须延伸给相同指令层中的选择器

// 可以
@media print {.error {border: 1px #f00;background-color: #fdd;}.seriousError {@extend .error;border-width: 3px;}
}// 不行
.error {border: 1px #f00;background-color: #fdd;
}@media print {.seriousError {// INVALID EXTEND: .error is used outside of the "@media print" directive@extend .error;border-width: 3px;}
}

6.指令

@at-root 让规则生成在文档的root层级下,不推荐使用
@debug @warn @error 调试用
@if 分支
@for @each @while 循环
其中each还可以写成这样

@each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move)
以及这样
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em)        再看一个@while的例子,变量可以很灵活
$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2; // 注意这里
}

@function 自定义函数

$width: 40px;@function grid-width($n) {@return $n * $width + ($n - 1);
}#sidebar { width: grid-width(5); }

这篇关于sass文档摘记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1037676

相关文章

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Python实现合并与拆分多个PDF文档中的指定页

《Python实现合并与拆分多个PDF文档中的指定页》这篇文章主要为大家详细介绍了如何使用Python实现将多个PDF文档中的指定页合并生成新的PDF以及拆分PDF,感兴趣的小伙伴可以参考一下... 安装所需要的库pip install PyPDF2 -i https://pypi.tuna.tsingh

Python批量调整Word文档中的字体、段落间距及格式

《Python批量调整Word文档中的字体、段落间距及格式》这篇文章主要为大家详细介绍了如何使用Python的docx库来批量处理Word文档,包括设置首行缩进、字体、字号、行间距、段落对齐方式等,需... 目录关键代码一级标题设置  正文设置完整代码运行结果最近关于批处理格式的问题我查了很多资料,但是都没

Python自动化Office文档处理全攻略

《Python自动化Office文档处理全攻略》在日常办公中,处理Word、Excel和PDF等Office文档是再常见不过的任务,手动操作这些文档不仅耗时耗力,还容易出错,幸运的是,Python提供... 目录一、自动化处理Word文档1. 安装python-docx库2. 读取Word文档内容3. 修改

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

SpringBoot3集成swagger文档的使用方法

《SpringBoot3集成swagger文档的使用方法》本文介绍了Swagger的诞生背景、主要功能以及如何在SpringBoot3中集成Swagger文档,Swagger可以帮助自动生成API文档... 目录一、前言1. API 文档自动生成2. 交互式 API 测试3. API 设计和开发协作二、使用

基于C#实现将图片转换为PDF文档

《基于C#实现将图片转换为PDF文档》将图片(JPG、PNG)转换为PDF文件可以帮助我们更好地保存和分享图片,所以本文将介绍如何使用C#将JPG/PNG图片转换为PDF文档,需要的可以参考下... 目录介绍C# 将单张图片转换为PDF文档C# 将多张图片转换到一个PDF文档介绍将图片(JPG、PNG)转