Sass/Scss基础

安装sass

bash 复制代码
npm install -g sass

Sass/Scss释义

ASS版本3.0之前的后缀名为.sass,而版本3.0之后的后缀名.scss。
**Sass (Syntactically Awesome Stylesheets)**是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个由buby语言 编写 CSS 预处理器,有严格的缩进风格。

Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3,增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承 (extend)、导入(inline imports) 等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

**SCSS (Sassy CSS),**一款css预处理语言,是 CSS 的超集, 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。

SCSS 需要使用分号和花括号而不是换行和缩进。

Sass 变量(&作用域)

sass 定义变量用 $ 符号(less 定义变量用@),Sass 变量可以存储的类型有字符串、数字、颜色值、布尔值、列表、null值。

css 复制代码
//header基本定义变量
$header-height: 60px !default;
$header-index: 1999 !default;
$header-bg: rgba(247,247,247,0.6) !default;
$header-font: 26px !default;

//使用
.nav-header{
  width: 100vw;
  height: $header-height;
  background-color: $header-bg;
  box-shadow: 0 6px 8px 0 rgba(28, 40, 83, 0.16);
  z-index: $header-index;


//嵌套

  //作用域
  .nav-header-content{
    $header-font: 30px;
    font-size: $header-font; // 只在这里面起作用
  }

  .nav-header-right{
    $header-font: 20px !global; // 相当于把全局的改掉了,全局生效
    font-size: $header-font;
  }

}

Sass 嵌套规则与属性

嵌套规则不用多说了,主要看一下嵌套属性

css 复制代码
// sass
font: {
  family: Helvetica, sans-serif;
  size: 20px;
  weight: 600;
}

//转换成css
font-family: Helvetica, sans-serif;
font-size: 20px;
font-weight: 600;

嗯,先记录这些吧。。。

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart2 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.2 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu2 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss2 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师2 小时前
React面试题
前端·javascript·react.js
木兮xg2 小时前
react基础篇
前端·react.js·前端框架
ssshooter2 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘3 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai3 小时前
HTML HTML基础(4)
前端·html