一、什么是scss？

1、scss

和less类似, sass 也是一种 CSS 的预编译语言
它提供了变量、嵌套、混合、函数等功能，并且完全兼容 CSS 语法
Scss 官方文档：https://www.sass.hk/

2、 scss 和 sass 的区别

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss
sass 和 scss 其实是一样的css预处理语言
sass 版本 3.0 之前的后缀名为 .sass ，而版本 3.0 之后的后缀名. scss

二、基本使用

1、easy sass插件

为了方便使用scss，可以在VScode中安装一个插件，可以帮助我们将scss文件转化为css
插件：easy sass

2、定义变量

scss使用 $ 符来标识变量

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;

3、使用变量

// scss语法
#app {background-color: $highlight-color;border: $basic-border;
}

4、变量范围

与css属性不同，变量可以在css规则定义之外存在。
当变量定义在css规则块内，那么该变量只能再次规则块内使用；如果它们出现在任何形式的{...}块中（如@media或@font-face块），情况如下

// scss语法
$nav-color :#f90;
nav {$width:100xpx;width: $width;color:$nav-color;background-color: black;
}

编译后

nav {width: 100px;color: #f90;background-color: black;
}

总结：
在上面的代码中，$nav-color这个变量定义在规则块的外边，所以这个样式表中都可以像 nav 规则块那样引用它

$width 这个变量定义在nav的{ }规则块内使用，所以它只能在nav规则块内使用，这意味着我们可以在样式表的其他地方定义和使用$width变量，不会对nav造成影响

5、嵌套语法

转换前

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;#app{background-color:  $highlight-color;border:$basic-border;.container{font-size:30px;}
}

转换之后

#app {background-color: #f90;border: 1px solid black;
}#app .container {font-size: 30px;
}

6、父选择器

假如你想针对某个特定子元素进行设置

a {color:blue;&:hover {color: red;}
}

7、scss与less区别

我们可以发现scss和less有很多相似之处，最大的区别就是在于声明变量的方式不同：
less采用的是@变量名，而less采用的是$变量名

什么是scss？scss 的基本使用相关推荐

gulp关于scss的基础配置
项目中用到的scss的配置,记录一下,谁叫咱脑袋不行呢 var gulp = require('gulp'); var plugins = require('gulp-load-plugins')() ...
工作302:scss目录编写
css 样式存放目录(待定,选用less或scss)这里我不会把style抽到外头,但是可以写一些全局样式放在这里,里面注意放入common.less normalize.less,里面直接写.el- ...
T-Bootstrap-day04-组件、boot的定制、scss基础语法和函数
文章目录一.常用组件二.其他组件 boot的定制一.SCSS,动态的样式语言(nodejs 8.11以上) 二.scss基础语法三.scss的函数四.指令(if-else) 一.常用组件卡 ...
Bootstrap(包括scss)复习
BootStrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. 中文镜像网站:http://www.bootcss.com 英文官网 http://getbootstrap.com 用 ...
Sass和Scss的区别
区别: Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: Sass是以".sass"后缀为扩展名,Scss是以scss后缀为扩展名 ...
在行内样式或对象格式的样式中使用scss变量
前言 scss可以通过$mcolor:color,设置变量,方便全局统一样式和后续修改整体风格.一般也不会写行内样式,所以用起来没什么问题.但是在使用uniapp及其第三方ui框架uview的时候,有 ...
前端架构介绍(linner scss coffeescript)
在互联网应用越来越大,越来越复杂的今天,我们不可避免的需要工具来管理我们的前端代码. 替代以前的一个巨大的脚本文件,我们希望可以将文件写入不同的文件模块.并且希望代码可以重用,可以简单的引用和添加各 ...
Vue scss 引入变量报错
官网css引入配置参考文章我在项目里自定义了vue.config.js的rules关于scss的loader所以我是直接子啊loader配置options就可以 { test: /\.scss$/ ...
CSS - SCSS
scss引入其他文件 @import "./variables.scss"; scss变量 - $ $primary-color: rgb(3, 166, 106); 嵌套 ul{ ...
支持SCSS：Clank高效移动应用原型框架
摘要:Clank是一款开源的原生移动应用的原型设计的工具,工具中的SCSS可以帮助开发者在网页布局的时候提高效率.整个工具是按部分划分的,开发者可以随意获取其中的任何一部分工具,十分方便. Clank ...

什么是scss？scss 的基本使用