Sass 特性

Sass是一种CSS预处理器,提供变量、嵌套规则、局部文件、混合、扩展和运算等强大功能。通过变量,可以方便地管理和重用样式;嵌套规则使得代码结构更清晰;局部文件和@use模块化组织代码;@mixin混合允许创建可复用的样式块;@extend实现选择器共享,简化代码;运算则支持简单的数学操作,增强CSS的灵活性。Sass的使用能显著提升CSS的可维护性和效率。
摘要由CSDN通过智能技术生成

Sass 特性

需要先去官网查看并下载 Sass,最好去读官网的内容,文章也只是总结,很多细节需要去官网看,mac 推荐用 brew,Sass 为 css 预处理器,当写好了 Sass 代码,运行 Sass 相关命令就可以 Sass 写法的代码转化为 普通css 代码.

Sass 命令

监视Sass 的某个文件或某个文件夹的文件 save 的时候将其转化为 css 文件

sass --watch input.scss output.css
sass --watch app/sass:public/stylesheets

Sass 特性

  • 变量

    • $变量名:css code

      $font-stack: Helvetica, sans-serif;
      $primary-color: #333;
      
      body {
        font: 100% $font-stack;
        color: $primary-color;
      }
      
  • 嵌套

    • 像 html 一样嵌套写法

      nav {
        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
      
        li { display: inline-block; }
      
        a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
        }
      }
      
  • 局部文件

    • 局部 scss 文件名称中要带有_前缀,下划线让 Sass 知道该文件只是部分文件,不应该生成到 CSS 文件中
    • 配合@use 使用,里面包含一些 css 片段,可被多个文件使用
  • 模块

    • Scss 文件配合@use可导入局部文件,允许你使用其中的变量,混合,方法,和js 的 import 相似.

      @use 'base';
      
      .inverse {
        background-color: base.$primary-color;
        color: white;
      }
      
  • 混合

    • @mixin theme($theme: DarkGray) {
        background: $theme;
        box-shadow: 0 0 1px rgba($theme, .25);
        color: #fff;
      }
      
    • .success {
        @include theme($theme: DarkGreen);
      }
      .info {
        @include theme;
      }
      
    • 通过@minxin定义 minxin 和 @include使用,minxin支持编写可重复的 css 声明组,使代码保持干净

  • 扩展/继承

    • %message-shared {
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
      }
      
    • .message {
        @extend %message-shared;
      }
      .error {
        @extend %message-shared;
        border-color: red;
      }
      
    • @extend 可以将一组 CSS 属性从一个选择器共享到另一个选择器。占位符类是一种特殊类型的类选择器,它只在扩展时打印.

  • 运算

    • @use "sass:math";
      article[role="main"] {
        width: math.div(600px, 960px) * 100%;
      }
      aside[role="complementary"] {
        width: math.div(300px, 960px) * 100%;
        margin-left: auto;
      }
      
    • Sass 允许简单的数学操作,+,-,*,%,math.div

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值