sass的用法

news/2024/12/25 22:05:51 标签: sass, 前端

一、内置函数变亮和变暗颜色

内置函数：可以自动变化颜色

lighten 和 darken 函数都是通过增加或者减小 HSL 中颜色的亮度来实现调节的。

$amount: 50%;

h1 {
    $color1: #000000;
    color: lighten($color1, $amount);
}

h2 {
    $color2: #ffffff;
    color: darken($color2, $amount);
}

二、列表（Lists）

列表就是 Sass 的数组。列表是一个一维的数据结构（不同于 maps），用于保存任意类型的数值（包括列表，从而产生嵌套列表）。

$font-stack: ('Helvetica', 'Arial', sans-serif);

三、Maps

$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

多个变量建议使用map，因为：最重要的优势就是 map 的遍历功能，这在多个不同变量中是不可能实现的。另一个支持使用 map 的原因，是它可以创建 map-get() 函数以提供友好 API 的功能。比如，思考一下下述 Sass 代码：

  • map-get(map，key)
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$z-indexes: (
  "modal": 5000,
  "dropdown": 4000,
  "default": 1,
  "below": -1
);

h1 {
    font-size: map-get($font-sizes, "small"); // 12px
    z-index: map-get($z-indexes, 'modal'); // 5000
}

四、变量的作用域标识符

  • !default：有利于开发者重写样式

  • !global：默认不写

!default：

如果创建一个库、框架、栅格系统甚至任何的 Sass 片段，是为了分发经验或者被其他开发者使用，那么与之配置的所有变量都应该使用 !default 标志来定义，方便其他开发者重写变量。

// your-library
$baseline: 1em !default;

开发者才能在引入你的库之前定义自用的 $baseline，引入后又不必担心自己的值被重定义了。

// 开发者自己定义的变量来覆盖第三方库的样式
$baseline: 2em;
// 引入第三方库，当不加 !default 会默认覆盖第二行的变量
@import "your-library";

// 最后输出：$baseline == 2em;

!global:

!global 标志应该只在局部范围的全局变量被覆盖时使用。定义根级别的变量时，!global 标志应该省略。

$baseline: 2em;

五、扩展@Extend

@extend ：它允许一个选择器继承另一个选择器的所有样式，从而减少重复代码并提高样式的可维护性。

例如：

sass代码

%button {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
}

.button-primary {
  @extend %button;
  background-color: blue;
  color: white;
}

编译后

.button-primary {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
  color: white;
}

📖知识点：使用 % 占位符类

  • %button 是一个占位符类，不会直接生成 CSS 代码。
  • 只有当它被 @extend 引用时，才会将它的样式应用到实际的选择器中。

六、混合（Mixin）

通过@mixin定义变量，@include使用变量，@content作占位

  • 无参混合
  • 含参混合

无参混合：

@mixin content {
  width: 100px;
  height: 100px;
  background-color: sandybrown
};

h1 {
  @include content;
}

含参混合：

  1. 用法1
@mixin content($width, $height, $color) {
  width: $width;
  height: $height;
  background-color: $color;
};

h1 {
  @include content(100px, 100px, #ff8c00);
}

也可以给默认值

@mixin content1($width: 100px, $height: 100px, $color: blue) {
  width: $width;
  height: $height;
  background-color: $color;
}

h2 {
  @include content1;
}
  1. 用法2

使用...将参数展开

@mixin content($width, $height, $color) {
  width: $width;
  height: $height;
  background-color: $color;
}

h1 {
  $params: (100px, 100px, #ff8c00);
  @include content($params...);
}

@content：

通常用于在调用@mixin时插入传递的内容

@mixin myMixin {
    color: blue;
    @content;
}

.demo {
    @include myMixin {
        font-size: 20px;
    }
}

编译后：

.demo {
    color: blue;
    font-size: 20px;
}

七、条件语句

Sass 通过 @if 和 @else 指令提供了条件语句

$flag: true;

@if $flag {
  h2 {
    color: blue;
  }
} @else {
  h2 {
    color: red;
  }
}

八、循环

  • @each
  • @for
1、@each

@each 循环绝对是 Sass 提供的三个循环方式中最常用的。它提供了一个简洁的 API 来迭代列表或 map。

  • 遍历list
$themes: (
  red,
  yellow,
  green,
  blue,
  purple
);
$prefix: 'my-theme';

@each $theme in $themes {
  .#{$prefix}-#{$theme} {
    background-color: $theme;
  }
}
  • #{} 语法：用于在 SCSS 中插入变量的值。
  • 动态生成类名：在选择器中使用 #{} 可以根据变量的值动态生成类名。
  • 避免字面字符串：不使用 #{} 时，变量会被当作字面字符串处理，而不是变量的值。

生成的结果为：

.my-theme-red {
  background-color: red;
}
.my-theme-yellow {
  background-color: yellow;
}
.my-theme-green {
  background-color: green;
}
.my-theme-blue {
  background-color: blue;
}
.my-theme-purple {
  background-color: purple;
}
  • 遍历map
$map: (
  'red': red,
  'yellow': yellow,
  'green': green,
  'blue': blue,
  'purple': purple
);

@each $key, $value in $map {
  .section-#{$key} {
    background-color: $value;
  }
}
2、@for

当需要聚合伪类 :nth-* 的时候，使用 @for 循环很有用。除了这些使用场景，如果必须迭代最好还是使用 @each 循环。

@for $i from 1 through 10 {
  .item:nth-of-type(#{$i}) {
    color: hsl($i * 36, 50%, 50%);
  }
}

编译后：

.item:nth-of-type(1) {
  color: hsl(36, 50%, 50%);
}

.item:nth-of-type(2) {
  color: hsl(72, 50%, 50%);
}

.item:nth-of-type(3) {
  color: hsl(108, 50%, 50%);
}

.item:nth-of-type(4) {
  color: hsl(144, 50%, 50%);
}

.item:nth-of-type(5) {
  color: hsl(180, 50%, 50%);
}

.item:nth-of-type(6) {
  color: hsl(216, 50%, 50%);
}

.item:nth-of-type(7) {
  color: hsl(252, 50%, 50%);
}

.item:nth-of-type(8) {
  color: hsl(288, 50%, 50%);
}

.item:nth-of-type(9) {
  color: hsl(324, 50%, 50%);
}

.item:nth-of-type(10) {
  color: hsl(360, 50%, 50%);
}

九、函数

1、基本使用
$width1: 10px;
$width2: 40px;

@function widthFn($n) {
  @return $n * $width1 + ($n - 1) * $width2; // 5 * 10px + (4 * 40px) = 210px
}

.leng {
  width: widthFn(5);
}
2、内置函数

sass的内置函数就如同js的对象原型上的方法一样，下面列举两个：

percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式

/*
错误写法，不能带单位
percentage(2px / 10px)
*/

div {
	width:percentage(.2);
}
round()

round()函数将一个数四舍五入为一个最接近的整数，在round()函数中可以携带单位的任何数值。

div {
    width: round(12.5px); // 13px
}

sassbem_416">十、sass实现bem规范

BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。

BEM 命名规范的基本概念

  • Block（块）：代表一个独立的组件，类似于一个功能模块。例如，一个导航栏或按钮。
  • Element（元素）：代表块的组成部分，与块紧密相关，但不能单独存在。例如，按钮中的图标或导航栏中的菜单项。
  • Modifier（修饰符）：代表块或元素的不同状态或变体，用于修改块或元素的外观或行为。例如，按钮的大小或颜色变化。

命名规则

  • 双下划线（__）：用于连接块和元素。
  • 双破折号（--）：用于连接块或元素与修饰符。

例如：

button__element--disabled
1. ts部分
export const NAMESPACE = 'xt'

export function createNamespace(name: string) {
  // 组件前缀
  const prefixName = `${NAMESPACE}-${name}`
  return createBEM(prefixName)
}

// 提供生成不同bem的方法
function createBEM(prefixName: string) {
  const b = (blockSuffix?: string) => _bem({ prefixName, blockSuffix })
  const e = (element?: string) => element && _bem({ prefixName, element })
  const m = (modifier?: string) => modifier && _bem({ prefixName, modifier })
  const be = (blockSuffix?: string, element?: string) => blockSuffix && element && _bem({ prefixName, blockSuffix, element })
  const bm = (blockSuffix?: string, modifier?: string) => blockSuffix && modifier && _bem({ prefixName, blockSuffix, modifier })
  const em = (element?: string, modifier?: string) => element && modifier && _bem({ prefixName, element, modifier })
  const bem = (blockSuffix?: string, element?: string, modifier?: string) => blockSuffix && element && modifier && _bem({ prefixName, blockSuffix, element, modifier })
  const is = (name: string, state: boolean) => state && `is-${name}`

  return {
    b,
    e,
    m,
    be,
    bm,
    em,
    bem,
    is
  }
}

// 生成bem
function _bem({
  prefixName,
  blockSuffix,
  element,
  modifier
}: {
  prefixName: string
  blockSuffix?: string
  element?: string
  modifier?: string
}) {
  return (
    `${prefixName}` +
    `${blockSuffix ? `-${blockSuffix}` : ''}` +
    `${element ? `__${element}` : ''}` +
    `${modifier ? `--${modifier}` : ''}`
  )
}

/**
 * 
    const bem = createNamespace('button')
    console.log(bem.b()) // xt-button
    console.log(bem.b('box')) // xt-button-box
    console.log(bem.e('element')) // xt-button__element
    console.log(bem.m('primary')) // xt-button--primary
    console.log(bem.be('icon', 'element')) // xt-button-icon__element
    console.log(bem.bm('box', 'primary')) // xt-button-box--primary
    console.log(bem.em('element', 'primary')) // xt-button__element--primary
    console.log(bem.bem('box', 'element', 'primary')) // xt-button-box__element--primary
    console.log(bem.is('disabled', true)) // is-disabled
 */
sass_507">2. sass部分
@use './common.scss' as *; // * 表示导入全部
/**
  导入的内容：
    $namespace: 'xt';
    $element-separator: '__';
    $modifier-separator: '--';
    $state-prefix: 'is-';
*/

@mixin b($block) {
  $b: $namespace + '-' + $block;
  .#{$b} {
    @content;
  }
}

// @at-root：将选择器的上下文提升到根级别
@mixin e($element) {
  @at-root {
    #{& + $element-separator + $element} {
      @content;
    }
  }
}

@mixin m($modifier) {
  @at-root {
    #{& + $modifier-separator + $modifier} {
      @content;
    }
  }
}

@mixin is($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}
sass_552">3. 如何利用sass生成一系列颜色

这种用法在组件库使用较多

@use './common.scss' as *;

$colors: (
  primary: #409eff,
  success: #67c23a,
  warning: #e6a23c,
  danger: #f56c6c,
  info: #909399
);

@function round-rgb($color) {
  $r: round(red($color) * 10) / 10;
  $g: round(green($color) * 10) / 10;
  $b: round(blue($color) * 10) / 10;
  @return rgb($r, $g, $b);
}

:root {
  @each $key, $color in $colors {
    --#{$namespace}-color-#{$key}: #{$color};

    @for $i from 2 through 9 {
      @if $i % 2 != 0 {
        $brightness-increase: min($i * 5%, 30%); // 限制亮度增加的最大值为 30%
        $new-color: round-rgb(lighten($color, $brightness-increase));
        --#{$namespace}-color-#{$key}-light-#{$i}: #{$new-color};
      }
    }
    --#{$namespace}-color-#{$key}-dark-2: #{round-rgb(darken($color, 10%))};
  }
}


@function get-color($key) {
  @return var(--#{$namespace}-color-#{$key});
}

生成的值为：

在这里插入图片描述


http://www.niftyadmin.cn/n/5799499.html

相关文章

华为云计算HCIE笔记05

华为云计算HCIE笔记05

第七章：其它模式 灾备组网 高可用性组网，单核心场景下，直接在两个站点中设置一个第三方仲裁站点，两个站点同时连接到仲裁，并且连接到对方。一旦出现问题，则由仲裁站点进行判断，进行业务切换 双核…
阅读更多...
openEuler安装指北

openEuler安装指北

今天不刷题了，今天来弄一下openEuler 原本这是博主的一个实验作业，老师给了代金卷去学习kunpeng上面的课程，但是看了几个视频下来都不是很清楚 但是要知道，一项真的有前景的技术，如果像高中课程那样一点一点嚼碎了喂你…
阅读更多...
我用火语言RPA写了个多流程UI界面客户端程序

我用火语言RPA写了个多流程UI界面客户端程序

我用RPA写了个多流程UI界面客户端程序 感谢热心用户分享：使用火语言RPA写了个多流程UI界面客户端程序，视频中应用的分享链接在这里哦，分享: 我用火语言RPA写了个多流程UI界面客户端程序 提取码: MWrG
阅读更多...
聊一聊敏捷测试

聊一聊敏捷测试

目录 一、测试是一个活动胜于测试是一个阶段 二、预防缺陷胜于发现缺陷 三、做测试者胜于做检查者 四、帮助构建最好的系统胜于破坏系统 五、团队为质量负责胜于测试者为质量负责 一、测试是一个活动胜于测试是一个阶段 在传统的瀑布模型中，测试作为单独的一个…
阅读更多...
flutter教程01 flutter项目的目录结构

flutter教程01 flutter项目的目录结构

Flutter开发基础 Dart语言： Flutter使用Dart语言进行开发。你需要熟悉Dart的基本语法和特性，如变量、数据类型、函数、类、继承、接口等。 Flutter组件： Flutter提供了丰富的UI组件库，你可以使用这些组件来构建你的用户界面。了…
阅读更多...
WebGL2示例项目常见问题解决方案

WebGL2示例项目常见问题解决方案

WebGL2示例项目常见问题解决方案 webgl2examples Rendering algorithms implemented in raw WebGL 2. [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/we/webgl2examples 项目基础介绍 WebGL2示例项目（https://github.com/tsherif/webgl2examples.gi…
阅读更多...
合合信息:探索视觉内容安全新前沿

合合信息:探索视觉内容安全新前沿

2024年12月13日-15日，中国图象图形学学会在杭州召开。大会期间，来自合合信息的图像算法研发总监郭丰俊进行了主题为“视觉内容安全技术的前沿进展与应用”的演讲，介绍了视觉内容安全问题，并总结了现今的技术发展，对我很…
阅读更多...
信号仿真高级工程师面试题

信号仿真高级工程师面试题

信号仿真高级工程师面试题可能涵盖多个方面，旨在全面评估应聘者的专业知识、技能水平、实践经验和问题解决能力。以下是一些可能的面试题及其简要解析： 一、专业知识与技能 描述你对信号仿真的理解 考察点：对信号仿真基本概念、原理及应用的掌握程度。参考答案：信号仿真是…
阅读更多...
最新文章

Copyright @ 2022~2023