SCSS 常用属性合集入门基础_sass入门基础教程

Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。官方文档1、规则嵌套Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:#main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}

SCSS 常用属性合集入门基础

Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。官方文档

SCSS 常用属性合集入门基础_sass入门基础教程

1、规则嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

#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、父选择器

在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; 
}

3、嵌套属性

有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

4、变量 $ (Variables: $)

SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:

$width: 5em;
// 使用
#main {
  width: $width;
}

编译为:

#main {
  width: 5em
}

5、运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。

p {
  width: 1in + 8pt;
}

编译为

p {
  width: 1.111in; 
}

6、变量定义 !default (Variable Defaults: !default)

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

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "First content";
  new-content: "First time reference"; 
}

7、@import

Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "foo.scss";

// 或

@import "foo";

Sass 允许同时导入多个文件,例如同时导入 rounded-corners 与 text-shadow 两个文件:

@import "rounded-corners", "text-shadow";

8、@media

Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media 用起来更方便,不需要重复使用选择器,也不会打乱 

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

编译为

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

9、@extend

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,一般会这样写:

.father{
    color: yellow;
    font-size: 18px;
  }
  .son{
    @extend .father;
    font-weight: bold;
  }

编译为

.son{
    color: yellow;
    font-size: 18px;
    font-weight: bold;
  }

10、控制指令 @if

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

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

编译为

p {
  border: 1px solid;
 }

@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明,例如:

$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; }

11、@for

@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>,或者 @for $var from <start> to <end>,区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 <start> 与 <end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外,$var 可以是任何变量,比如 $i;<start> 和 <end> 必须是整数值。即through前闭后闭 to是前闭后开

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

编译为

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

12、@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者 $name,而 <list> 是一连串的值,也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目,然后输出结果,例如:

@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'); }

13、@while

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

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

编译为

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

14、定义混合样式指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式,比如名为 large-text 的混合通过下面的代码定义:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

引用混合样式 @include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

15、混合样式指令的参数

参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

16、函数指令 (Function Directives)

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

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

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

编译为

#sidebar {
  width: 240px;
 }

 

海计划公众号
(0)
上一篇 2020/03/29 01:42
下一篇 2020/03/29 01:42

您可能感兴趣的内容

  • bttn.css入门基础教程_一组好看的按钮集合

    bttn.css入门基础教程 官方网址:https://bttn.surge.sh/ GitHub:https://github.com/ganapativs/bttn.css 简…

    2020/03/06
  • 如何保持学习编程的动力基础入门_编程菜鸟知识

    学编程现在看起来挺简单,因为网上有丰富的各种资源。然而当你实际去学的时候就发现,还是很难!对我来说也一样。但从某天起,我决定认认真真学编程一年。后来又过了一年,又过了一年又一年……我好像有点感悟。如果你曾致力于学习一些重要的东西,就会知道在漫长的艰难时刻保持自己的积极性是多么困难。你怎么做呢?我说下我的经验:1. 去开发点真东西不要只一味地跟着教程学。它们有

    2020/03/30
  • web测试要点、方法小白入门web端测试大全总结_测试作者: 转载基础入门

    一、功能测试 1.1链接测试 链接是web应用系统的一个很重要的特征,主要是用于页面之间切换跳转,指导用户去一些不知道地址的页面的主要手段,链接测试一般关注三点: 1)链接是否按照既定指示那样,确实链接到了该链接的界面 2)测试该链接所链接的页面是否真的存在 3)保证系统中没有单独存在的页面(即没有

    2020/04/05
  • AlloyDesigner入门知识_网站前端开发效率工具

    AlloyDesigner教程视频 官方网址:http://alloyteam.github.io/AlloyDesigner/ 简介描述:网站前端开发效率工具 Bonsai.js…

    2020/03/06
  • CSS中的cursor属性入门百科_属性基础入门

    css中的cursor这个属性是用来设置光标形状的。这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状。默认值:auto继承性:yes出现版本:css2JavaScript语法:object.style.cursor = ‘pointer‘可以设置的值:值描述url需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没

    2020/03/24
  • javascript作用域有几种类型?小白基础_作用域新手入门

    作用域是可访问的变量的集合;在JavaScript中,作用域为可访问变量,对象,函数的集合。那么在JavaScript中有几种作用域类型?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。javascript作用域有两种类型:局部作用域、全局作用域。全局作用域(Global Scope)变量在函数外定义为全局变量,全局变量有局作用域:网页中的所有脚本和函数

    2020/03/24
  • 理解Js的作用域和作用域链基础知识入门_作用域教程视频

    作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。正确的去理解这个概念有利于你去写更好,更高效和更简洁的代码,让你成为一个更优秀的Javascript开发者。因此,在本文中,我将会向大家解释清楚什么是作用域和作用域链,以及Javascr

    2020/03/20
  • Js柯里化菜鸟知识_柯里化小白帮助

    简介柯里化(Currying),又称部分求值(Partial Evaluation),是把接收多个参数的函数变成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受剩余的参数而且返回结果的新函数的技术。核心思想: 把多参数传入的函数拆成单参数(或部分参数)函数,内部再返回调用下一个单参数(或部分参数)函数,依次处理剩余的参数。按照Stoyan Ste

    2020/03/24
  • 20个Web前端开发工程师必看的国外网站入门百科_网站基础教程

    前言兄弟们,你们还在边喝营养快线边看 pornxxx 吗 ? 休息一下吧,营养跟不上啦,跟我一起学习吧,一起”科学”上网 !1. Codewarshttps://www.codewars.comCodewars 提供了大量由他们自己的社区提交和编辑的编程挑战,在这里,你可以使用多种编程语言像打游戏升级一样进行挑战。通过在线编辑器直接完成每项挑战。通过实战训练

    2020/03/22
  • web前端性能优化指南指南教程_性能基础知识

    前端需要性能优化么?性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端,前端的性能优化会更直接

    2020/03/24
  • wxSearch入门百科_微信小程序优雅的搜索框

    wxSearch入门百科 GitHub:https://github.com/icindy/wxSearch 简介描述:微信小程序优雅的搜索框 wxSearch-微信小程序优雅的搜…

    2020/03/11
  • form表单文件上传菜鸟教程multipart/form-data文件上传_文件菜鸟教程下载

    form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式application/x-www-form-urlencoded:默认编码方式multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。多部件请求体POST / HTT

    2020/04/03
  • 前端防抖和节流小白基础_节流使用帮助

    窗口的resize、scroll、输入框内容校验等操作时,如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时,在这种情况下如果事件触发的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少触发的频率,同时又不影响实际效果。防抖在事件被触发n秒之后执行,如果在此期间再次触发事件

    2020/03/22
  • 编写高质量JavaScript模块的4个最佳实践基础指南_模块攻略教程

    编写高质量JavaScript模块的4个最佳实践基础指南 使用ES2015模块,您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。 这很好,但是如何构造模块呢?一个模…

    2020/03/19
  • Vue项目中使用Axios封装http请求基础指南_axios基础知识

    使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求。安装npm install axios –save建立http.js文件在/src/utils/目录下建立一个htttp.js1.首先导入axios和router。import ax

    2020/03/23
  • ice 飞冰基础知识教程_让前端开发简单而友好

    ice 飞冰基础知识教程 官方网址:https://ice.work/ GitHub:https://github.com/alibaba/ice/ 简介描述:让前端开发简单而友好…

    2020/03/06