登录
当前位置： 首页 > 工具软件 > Prefixes.scss > 使用案例 >

scss 基本语法整理

周育
2023-12-01

scss 基本使用

Variables 变量

  • 声明变量时需以 $ 开头
  • scss 语法
// 定义变量
$primary-color: #1269b5;
$primary-border: 1px solid $primary-color;

div.box {
  background-color: $primary-color;
}

h1.page-header {
  border: $primary-border;
}
  • 编译后的 css
div.box {
  background-color: #1269b5;
}

h1.page-header {
  border: 1px solid #1269b5;
}
/*# sourceMappingURL=Variables.css.map */

嵌套 Nesting

普通嵌套

  • scss 语法
.nav {
  height: 100px;
  ul {
    margin: 0;
    li {
      float: left;
      list-style: none;
      padding: 5px;
    }
  }
}
  • 编译后的 css
.nav {
  height: 100px;
}

.nav ul {
  margin: 0;
}

.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}

调用父选择器

  • scss 语法
.nav {
  height: 100px;
  ul {
    margin: 0;
    li {
      float: left;
      list-style: none;
      padding: 5px;
    }
    a {
      display: block;
      color: #000;
      padding: 5px;
      &:hover {
        background: #0d2ffe;
        color: #fff;
      }
    }
  }
  & &-text {
    font-size: 15px;
  }
}
  • 编译后的 css
.nav {
  height: 100px;
}

.nav ul {
  margin: 0;
}

.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}

.nav ul a {
  display: block;
  color: #000;
  padding: 5px;
}

.nav ul a:hover {
  background: #0d2ffe;
  color: #fff;
}

.nav .nav-text {
  font-size: 15px;
}

属性嵌套

  • scss 语法
body {
  font: {
    family: Helvetica, Arial, sans-serif;
    size: 15px;
    weight: normal;
  }
}

.nav {
  border: 1px solid #000 {
    left: 0;
    right: 0;
  }
}
  • 编译后的 css
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.nav {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}

混合 Mixins

基本使用

  • scss 语法
// 定义
@mixin alert {
  color: #8a6b3a;
  background-color: #fcf8e3;
  a {
    color: #664f2b;
  }
}

// 引用
.alert-waring {
  @include alert;
}
  • 编译后的 css
.alert-waring {
  color: #8a6b3a;
  background-color: #fcf8e3;
}

.alert-waring a {
  color: #664f2b;
}

携带参数

  • scss 语法
@mixin alert($text-color, $background) {
  color: $text-color;
  background-color: $background;
  a {
    color: darken($color: $text-color, $amount: 10%); // $text-color颜色加深10%
  }
}

// 引用
.alert-waring {
  @include alert(#8a6b3a, #fcf8e3);
}
// 指定形参
.alert-info {
  @include alert($background: #d9edf7, $text-color: #31708f);
}
  • 编译后的 css
.alert-waring {
  color: #8a6b3a;
  background-color: #fcf8e3;
}

.alert-waring a {
  color: #664f2b;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
}

.alert-info a {
  color: #245269;
}

继承 extend

  • scss 语法
.alert {
  padding: 15px;
}

.alert a {
  font-weight: bold;
}

.alert-info {
  @extend .alert;
  background-color: #d9edf7;
}
  • 编译后的 css
.alert,
.alert-info {
  padding: 15px;
}

.alert a,
.alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #d9edf7;
}

导入 import

  • 通过 @import 可以导入其他 scss 文件
  • @import 不会发送 http 请求，而是直接将导入文件和本文件的样式混合在一起，最后编译成一个新的 css 文件
  • 预导入的 _base.scss 文件 (以 _ 开头，表明它是一个 Partial)
body {
  padding: 0;
  margin: 0;
}
  • 使用 @import
// @import 导入其他scss文件
@import "base";
.alert {
  padding: 15px;
}

.alert a {
  font-weight: bold;
}

.alert-info {
  @extend .alert;
  background-color: #d9edf7;
}
  • 编译后的结果
body {
  padding: 0;
  margin: 0;
}

.alert,
.alert-info {
  padding: 15px;
}

.alert a,
.alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #d9edf7;
}

注释 Comment

  • 单行注释：不会出现在 css 里面；语法：// 单行注释
  • 多行注释：会包含在没有压缩之后的 css 里面；语法：/* 多行注释 */
  • 强制注释：会永久保留在 css 里面；语法：/*! 强制注释 */
/*
 * 多行注释
 * 编译时保留 会包含在没有压缩之后的css里面
 * 压缩时清除
 */

/*!
 * 强制注释
 * 会一直出现在 css 里面
 */

// 单行注释 编译时清除 不会出现在 css 里面
.alert {
  padding: 15px;
}

.alert a {
  font-weight: bold;
}

.alert-info {
  @extend .alert;
  background-color: #d9edf7;
}
  • expanded 方式输出 css
@charset "UTF-8";
/*
 * 多行注释
 * 编译时保留 会包含在没有压缩之后的css里面
 * 压缩时清除
 */
/*!
 * 强制注释
 * 会一直出现在 css 里面
 */
.alert,
.alert-info {
  padding: 15px;
}

.alert a,
.alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #d9edf7;
}
  • compressed (压缩)方式输出 css
/*!
 * 强制注释
 * 会一直出现在 css 里面
 */
.alert,
.alert-info {
  padding: 15px;
}
.alert a,
.alert-info a {
  font-weight: bold;
}
.alert-info {
  background-color: #d9edf7;
}
/*# sourceMappingURL=Comment.css.map */

数据类型 Data Type

概览

// number - 5
// string - hello | "hello"
// list - 1px solid #000 | 5px 10px
// color - red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%)

number 数字类型

算数运算

  • 加法：
    • 2 + 8 输出 10
    • 带单位：5px + 5px 输出 10px
  • 乘法：
    • 2 * 8 输出 16
    • 带单位：5px * 2 输出 10px (5px * 2px 输出 10px*px)
  • 除法：
    • 8 / 2 输出 8/2, css 中某些属性的值会使用到/这种形式，如：font: 16px/1.8 serif（16px 表示字号 1.8 表示行间距）
    • (8 / 2) 输出 4
    • 带单位：(10px / 2px) 输出 5
    • 带单位：(10px / 2) 输出 5px
  • 混合运算
    • 3 + 2 * 5px 输出 13px
    • (3 + 2) * 5px 输出 25px

数字函数

  • 绝对值
    • abs(10) 输出 10
    • abs(10px) 输出 10px
    • abs(-10px) 输出 10px
  • 四舍五入
    • round(3.5) 输出 4
    • round(3.2) 输出 3
  • 向上取整
    • ceil(3.2) 输出 4
    • ceil(3.1) 输出 4
  • 向下取整
    • floor(3.6) 输出 3
  • 转换百分数
    • percentage(650px / 1000px) 输出 65%
  • 取最小值
    • min(1, 2, 3) 输出 1
  • 取最大值
    • max(1, 2, 3) 输出 3

string 字符串类型

字符串连接

// 带引号
span {
  &::after {
    content: "ning" + hao;
  }
}

span::after {
  content: "ninghao";
}

// 不带引号
span {
  &::after {
    content: ning + hao;
  }
}

span::after {
  content: ninghao;
}

// 和数字
span {
  &::after {
    content: "ninghao" + 8080;
  }
}

span::after {
  content: "ninghao8080";
}

span {
  &::after {
    content: ning - hao;
  }
}
span {
  &::after {
    content: ning / hao;
  }
}

span::after {
  content: ning-hao;
}
span::after {
  content: ning / hao;
}

字符串函数

  • 大小写转换 to-lower-case($string) to-upper-case($string)
$greeting: "Hello ninghao";

span {
  &::before {
    content: to-lower-case($string: $greeting);
  }
  &::after {
    content: to-upper-case($string: $greeting);
  }
}

span::before {
  content: "hello ninghao";
}

span::after {
  content: "HELLO NINGHAO";
}
  • 获取字符串长度 str-length($string)
$greeting: "Hello ninghao";

span {
  display: inline-block;
  width: str-length($string: $greeting) * 1em;
}

span {
  display: inline-block;
  width: 13em;
}
  • 获取字符串中指定子字符串位置 str-index($string, $substring)
$greeting: "Hello ninghao";
span {
  display: inline-block;
  width: str-index($greeting, "Hello") * 1em;
}

span {
  display: inline-block;
  width: str-index($greeting, "ninghao") * 1em;
}

span {
  display: inline-block;
  width: 1em;
}

span {
  display: inline-block;
  width: 7em;
}
  • 字符串中指定位置插入字符 str-insert($string, $insert, $index)
$greeting: "Hello ninghao";
span {
  &::after {
    content: str-insert($string: $greeting, $insert: ".net", $index: 14);
  }
}

span::after {
  content: "Hello ninghao.net";
}

color 颜色类型

表示颜色的方式

  • 十六进制 Hex, 如: #ff0000
  • RGB, 如: rgb(255, 0, 0)
  • String, 如: red, green, blue

处理颜色的函数

  • rgb(red, green, blue) 生成颜色
// scss
div {
  background-color: rgb(255, 0, 0);
}

div {
  background-color: rgb(100%, 0, 0);
}

div {
  background-color: rgb(255, 255, 0);
}

div {
  background-color: rgba(255, 255, 0, 0.5);
}

/* css */
div {
  background-color: red;
}

div {
  background-color: red;
}

div {
  background-color: yellow;
}

div {
  background-color: rgba(255, 255, 0, 0.5);
}
  • hsl(hue, saturation, lightness) - hue-色相-0~360, saturation-饱和度-0~100, lightness-明度-0~100) 生成颜色
// scss
div {
  background-color: hsl(0, 100%, 50%);
}

div {
  background-color: hsl(60, 100%, 50%);
}

div {
  background-color: hsla(60, 100%, 50%, 0.5);
}

/* css */
div {
  background-color: red;
}

div {
  background-color: yellow;
}

div {
  background-color: rgba(255, 255, 0, 0.5);
}
  • adjust-hue($color, $degrees) 调整颜色色相
// scss
// 这2种是同一颜色
$base-color: #ff0000;
$base-color-hsl: hsl(0, 100, 50%);

div {
  background-color: adjust-hue($color: $base-color-hsl, $degrees: 137deg);
}

/* css */
div {
  background-color: #00ff48;
}
  • lighten($color, $amount) 淡化明度;darken($color, $amount) 加深明度
// scss
$base-color: hsl(222, 100%, 50%);
$light-color: lighten($base-color, 30%);
$darken-color: darken($base-color, 20%);
div {
  border: 1px solid $base-color;
  background-color: $light-color;
  color: $darken-color;
}

/* css */
div {
  border: 1px solid #004dff;
  background-color: #99b8ff;
  color: #002e99;
}
  • saturate($color, $amount) 增大饱和度; desaturate($color, $amount) 减小饱和度
// scss
$base-color: hsl(221, 50%, 50%);

.alert {
  background-color: saturate($color: $base-color, $amount: 50%);
}
.alert-info {
  background-color: desaturate($color: $base-color, $amount: 30%);
}

/* css */
.alert {
  background-color: #0051ff;
}

.alert-info {
  background-color: #667699;
}
  • transparentize($color, $amount) 增加透明度; opacify($color, $amount) 增加不透明度
// scss
$base-color: hsla(222, 100%, 50%, 0.5);
.alert {
  color: $base-color;
  background-color: opacify($color: $base-color, $amount: 0.3);
}
.alert-info {
  background-color: transparentize($color: $base-color, $amount: 0.2);
}

/* css */
.alert {
  color: rgba(0, 77, 255, 0.5);
  background-color: rgba(0, 77, 255, 0.8);
}

.alert-info {
  background-color: rgba(0, 77, 255, 0.3);
}

list 列表类型

  • list 中的值可以使用空格分隔开，也可以使用逗号分隔开
// scss
.container {
  border: 1px solid #000;
  font-family: "Courier New", Courier, monospace;
}
  • list 中可以包含 list
// scss
.demo {
  padding: 5px 10px, 5px 0;
}

.demo-1 {
  padding: (5px 10px) (5px 0);
}

/* css */
.demo {
  padding: 5px 10px, 5px 0;
}

.demo-1 {
  padding: 5px 10px 5px 0;
}

list 相关的函数

  • 获取 list 长度 length($list)
// scss
$list-1: 5px 10px;
$list-2: 5px 10px 5px 0;

.list {
  &::before {
    content: length($list: $list-1);
  }
  &::after {
    content: length($list: $list-2);
  }
}

/* css */
.list::before {
  content: 2;
}

.list::after {
  content: 4;
}
  • 根据索引获取元素 nth($list, $n)
// scss
.list-nth {
  padding: nth($list: 5px 10px, $n: 1);
  margin: nth($list: 5px 10px, $n: 2);
}

/* css */
.list-nth {
  padding: 5px;
  margin: 10px;
}
  • 根据元素值获取索引 index($list, $value)
// scss
.list-index {
  &::before {
    content: index($list: 1px solid red, $value: solid);
  }
}

.list-index::before {
  content: 2;
}
  • 插入元素 append($list, $val, $separator)
// scss
.list-append {
  // $list 列表 $val 要插入的元素
  // $separator 返回列表的分隔符,可省略 space-空格 comma-逗号 auto-跟随旧列表
  margin: append($list: 5px 10px, $val: 4px, $separator: space);
  margin: append($list: 5px 10px, $val: 4px, $separator: comma);
  margin: append(
    $list: (
      5px,
      10px,
    ),
    $val: 4px,
    $separator: auto
  );
  margin: append($list: 5px 10px, $val: 4px, $separator: auto);
}

/* css */
.list-append {
  margin: 5px 10px 4px;
  margin: 5px, 10px, 4px;
  margin: 5px, 10px, 4px;
  margin: 5px 10px 4px;
}
  • 合并列表 join($list1, $list2, $separator)
// scss
.list-join {
  padding: join($list1: 3px 4px, $list2: 5px 6px, $separator: auto);
}

/* css */
.list-join {
  padding: 3px 4px 5px 6px;
}

Map 特殊的列表

  • 形式: $map: (key1: value1, key2: value2, key3: value3)

map 相关的函数

  • 获取 map 长度 length($map)
// scss
// map 类型的数据
$colors: (
  light: #ffffff,
  dark: #000000,
);

.map-length {
  &::after {
    content: length($list: $colors);
  }
}

/* css */
.map-length::after {
  content: 2;
}
  • 根据key获取value map-get($map, $key)
// scss
// map 类型的数据
$colors: (
  light: #ffffff,
  dark: #000000,
);
.map-map-get {
  &::after {
    content: map-get($map: $colors, $key: dark);
  }
}

/* css */
.map-map-get::after {
  content: #000000;
}
  • 获取所有的 key map-keys($map)
$colors: (
  light: #ffffff,
  dark: #000000,
);

.map-map-keys {
  &::after {
    content: map-keys($map: $colors);
  }
}

/* css */
.map-map-keys::after {
  content: light, dark;
}
  • 获取所有的 value map-values($map)
// scss
$colors: (
  light: #ffffff,
  dark: #000000,
);
.map-map-values {
  &::after {
    content: map-values($map: $colors);
  }
}

/* css */
.map-map-values::after {
  content: #ffffff, #000000;
}
  • 判断 map 中是否有某一 key map-has-key($map, $key)
// scss
$colors: (
  light: #ffffff,
  dark: #000000,
);
.map-map-has-keys {
  &::after {
    content: map-has-key($map: $colors, $key: light);
  }
}

/* css */
.map-map-has-keys::after {
  content: true;
}
  • map 合并 map-merge($map1, $map2)
  • 移除 map 中某几项 map-remove($map, $keys)

Boolean 布尔

  • 值：true/false
// scss
.boolean-1 {
  &::before {
    content: 5 > 3;
  }
}

.boolean-1::before {
  content: true;
}
  • 逻辑运算符：and, or, not

Interpolation 插值

// scss
$version: "0.0.1";
/* 项目当前的版本是:  #{$version}*/

$name: "info";
$attr: "border";

.alert-#{$name} {
  #{$attr}-color: red;
}

/* css */
@charset "UTF-8";
/* 项目当前的版本是:  0.0.1*/
.alert-info {
  border-color: red;
}

Control Directives 控制指令

  • @if 判断
// scss
$user-prefixes: true;

.rounded {
  @if $user-prefixes {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 5px;
  }
  border-radius: 5px;
}

/* css */
.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  padding: 5px;
  border-radius: 5px;
}

// scss
$theme: "light";
body {
  @if $theme == dark {
    background-color: black;
  } @else if $theme == light {
    background-color: white;
  } @else {
    background-color: gray;
  }

/* css */
body {
  background-color: white;
}

  • @for 循环:

    • @for $var form <开始值> to <结束值> {}
    // scss
$columns: 4;
@for $i from 1 to $columns {
  .col-#{$i} {
    width: 100% / $columns * $i;
  }
}

    /* css */
.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}
    • @for $var form <开始值> through <结束值> {}
    // scss
$columns: 4;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: 100% / $columns * $i;
  }
}

    /* css */
.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

  • @each 遍历列表: @each $var in list {}

// scss
$icons: success error warning;
@each $icon in $icons {
  .icon-#{$icon} {
    background-image: url(./images/#{$icon}.png);
  }
}

/* css */
.icon-success {
  background-image: url(./images/success.png);
}

.icon-error {
  background-image: url(./images/error.png);
}

.icon-warning {
  background-image: url(./images/warning.png);
}
  • @while 循环: @while condition {}
// scss
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 5px * $i;
  }
  $i: $i - 2;
}

/* css */
.item-6 {
  width: 30px;
}

.item-4 {
  width: 20px;
}

.item-2 {
  width: 10px;
}

function 自定义函数

  • 语法
@function 名称(参数1, 参数2) {
  ...
}
  • 例子: 在一个map 中,根据 key 获取对应的 value
// scss
$colors: (
  light: #ffffff,
  dark: #000000,
);
@function color($key) {
  @return map-get($map: $colors, $key: $key);
}

body {
  background-color: color(light);
}

/* css */
body {
  background-color: #ffffff;
}

警告与错误

// scss
$colors: (
  light: #ffffff,
  dark: #000000,
);
@function color($key) {
  @if map-has-key($map: $colors, $key: $key) {
    @warn "在 $colors 里面没找到 #{$key} 这个 key ";
    // @error "在 $colors 里面没找到 #{$key} 这个 key ";
  }
  @return map-get($map: $colors, $key: $key);
}

body {
  background-color: color(gray);
}
 类似资料：

相关阅读

C#学习笔记——基本语法python基本语法练习实例Kotlin 基本语法实例详解Java数组的基本操作方法整理Java8之lambda表达式基本语法

相关文章

测试基本术语Dart语言基础语法R语言基础语法VB.Net基础语法Swift基础语法

相关问答

批处理脚本语法不正确VS代码语法类型脚本语法突出显示无法推断基本URL…springfox-swagger2版本2.9.2基于文本的博弈非分支if语句负整数>正整数？[副本]

相关文档

GO 语言基础教程C 语言基础教程网络基本功系列Markdown 语法说明语言本能：人类语言进化的奥秘
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.