Sass Best Practices

作者 mindrally97184105b5da無授權條款269 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫5 週前更新

Sass (indented syntax) best practices and coding guidelines for clean, maintainable stylesheets

僅含說明Software Development
AI 產生的概覽

提供 Sass 縮排語法的最佳實務與編碼規範，協助撰寫整潔、易維護的樣式表。

功能
此技能提供一套撰寫 Sass 縮排語法的慣例與程式碼範例，涵蓋檔案組織、變數、mixin、函式、placeholder、迴圈、條件判斷，以及現代 @use/@forward 模組系統。它也說明 BEM 等命名慣例、巢狀結構建議、屬性排序與效能提示。它產出的是指引與範例程式碼，而非產生的檔案或指令碼。
適用情境
適用於撰寫、審查或重構 Sass 樣式表，並希望維持一致結構與風格的情況。也適合回答關於縮排語法 Sass、CSS 架構、mixin、變數或模組組織的問題。
執行需求
不需要任何工具、套件或憑證；僅為說明性內容，不附帶指令碼。

Sass Best Practices

You are an expert in Sass (the indented syntax), CSS architecture, and maintainable stylesheet development.

Key Principles

  • Write clean, readable Sass using the indented syntax (whitespace-sensitive)
  • Leverage Sass features to create DRY, modular stylesheets
  • Maintain consistent indentation as it defines code structure
  • Prioritize simplicity and clarity in style organization

Sass vs SCSS

Sass uses the original indented syntax:

  • No curly braces {}
  • No semicolons ;
  • Indentation defines nesting
  • File extension: .sass
sass
// Sass (indented syntax).button  display: inline-flex  padding: 8px 16px  background: #3498db
  &:hover    background: darken(#3498db, 10%)
scss
// SCSS syntax (for comparison).button {  display: inline-flex;  padding: 8px 16px;  background: #3498db;
  &:hover {    background: darken(#3498db, 10%);  }}

File Organization

Project Structure

sass/├── abstracts/│   ├── _variables.sass│   ├── _functions.sass│   ├── _mixins.sass│   └── _placeholders.sass├── base/│   ├── _reset.sass│   ├── _typography.sass│   └── _base.sass├── components/│   ├── _buttons.sass│   ├── _cards.sass│   └── _forms.sass├── layout/│   ├── _header.sass│   ├── _footer.sass│   └── _grid.sass├── pages/│   └── _home.sass├── themes/│   └── _default.sass├── vendors/│   └── _normalize.sass└── main.sass

Main Manifest

sass
// main.sass@use 'abstracts/variables'@use 'abstracts/functions'@use 'abstracts/mixins'@use 'abstracts/placeholders'
@use 'vendors/normalize'
@use 'base/reset'@use 'base/typography'@use 'base/base'
@use 'layout/grid'@use 'layout/header'@use 'layout/footer'
@use 'components/buttons'@use 'components/cards'@use 'components/forms'
@use 'pages/home'
@use 'themes/default'

Variables

Naming and Organization

sass
// _variables.sass
// Colors$color-primary: #3498db$color-primary-light: lighten($color-primary, 15%)$color-primary-dark: darken($color-primary, 15%)$color-secondary: #2ecc71$color-text: #333333$color-text-muted: #666666$color-background: #ffffff$color-border: #e0e0e0$color-error: #e74c3c$color-success: #27ae60$color-warning: #f39c12
// Typography$font-family-base: 'Helvetica Neue', Arial, sans-serif$font-family-heading: 'Georgia', serif$font-size-base: 1rem$font-size-small: 0.875rem$font-size-large: 1.25rem$font-weight-normal: 400$font-weight-bold: 700$line-height-base: 1.5
// Spacing Scale$spacing-unit: 8px$spacing-xs: $spacing-unit * 0.5$spacing-sm: $spacing-unit$spacing-md: $spacing-unit * 2$spacing-lg: $spacing-unit * 3$spacing-xl: $spacing-unit * 4$spacing-xxl: $spacing-unit * 6
// Breakpoints$breakpoint-sm: 576px$breakpoint-md: 768px$breakpoint-lg: 992px$breakpoint-xl: 1200px
// Z-index Scale$z-index-dropdown: 1000$z-index-sticky: 1020$z-index-fixed: 1030$z-index-modal: 1050$z-index-tooltip: 1070
// Transitions$transition-base: 0.3s ease$transition-fast: 0.15s ease$transition-slow: 0.5s ease
// Border Radius$border-radius-sm: 2px$border-radius-md: 4px$border-radius-lg: 8px$border-radius-pill: 50px
// Shadows$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)

Using Maps

sass
// Define maps for grouped values$colors: ("primary": #3498db, "secondary": #2ecc71, "danger": #e74c3c, "warning": #f39c12, "success": #27ae60)
$breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px)
// Access values.element  color: map-get($colors, "primary")

Mixins

Responsive Design

sass
// _mixins.sass
=respond-to($breakpoint)  @if map-has-key($breakpoints, $breakpoint)    @media (min-width: map-get($breakpoints, $breakpoint))      @content  @else    @warn "Unknown breakpoint: #{$breakpoint}"
// Usage.element  width: 100%
  +respond-to("md")    width: 50%
  +respond-to("lg")    width: 33.333%

Flexbox Utilities

sass
=flex-center  display: flex  align-items: center  justify-content: center
=flex-between  display: flex  align-items: center  justify-content: space-between
=flex-column  display: flex  flex-direction: column
// Usage.container  +flex-center  min-height: 100vh

Typography

sass
=font-size($size, $line-height: null)  font-size: $size  @if $line-height    line-height: $line-height
=truncate($lines: 1)  @if $lines == 1    white-space: nowrap    overflow: hidden    text-overflow: ellipsis  @else    display: -webkit-box    -webkit-line-clamp: $lines    -webkit-box-orient: vertical    overflow: hidden
// Usage.title  +font-size(2rem, 1.2)
.description  +truncate(3)

Accessibility

sass
=visually-hidden  position: absolute  width: 1px  height: 1px  padding: 0  margin: -1px  overflow: hidden  clip: rect(0, 0, 0, 0)  white-space: nowrap  border: 0
=focus-visible  &:focus-visible    outline: 2px solid $color-primary    outline-offset: 2px
// Usage.sr-only  +visually-hidden
.interactive  +focus-visible

Button Styles

sass
=button-base  display: inline-flex  align-items: center  justify-content: center  padding: $spacing-sm $spacing-md  border: none  border-radius: $border-radius-md  font-family: inherit  font-size: $font-size-base  font-weight: $font-weight-bold  text-decoration: none  cursor: pointer  transition: all $transition-base
  &:disabled    opacity: 0.5    cursor: not-allowed
=button-variant($bg-color, $text-color: white)  +button-base  background: $bg-color  color: $text-color
  &:hover:not(:disabled)    background: darken($bg-color, 10%)
  &:active:not(:disabled)    background: darken($bg-color, 15%)
// Usage.btn-primary  +button-variant($color-primary)
.btn-secondary  +button-variant($color-secondary)
.btn-danger  +button-variant($color-error)

BEM Naming Convention

sass
// Block.card  background: $color-background  border-radius: $border-radius-md  box-shadow: $shadow-md
  // Element  &__header    padding: $spacing-md    border-bottom: 1px solid $color-border
  &__title    margin: 0    font-size: $font-size-large    font-weight: $font-weight-bold
  &__body    padding: $spacing-md
  &__footer    padding: $spacing-md    border-top: 1px solid $color-border
  // Modifier  &--featured    border: 2px solid $color-primary
  &--compact    .card__header,    .card__body,    .card__footer      padding: $spacing-sm

Nesting Guidelines

Keep Nesting Shallow

sass
// BAD: Too deep.nav  .nav-list    .nav-item      .nav-link        .nav-icon          // 5 levels - avoid this
// GOOD: Flat BEM structure.nav  display: flex
.nav__list  display: flex  list-style: none  margin: 0  padding: 0
.nav__item  margin: 0 $spacing-sm
.nav__link  color: $color-text  text-decoration: none
  &:hover,  &:focus    color: $color-primary
  &--active    color: $color-primary    font-weight: $font-weight-bold

Acceptable Nesting

sass
.component  // Pseudo-elements  &::before,  &::after    content: ''
  // States  &:hover,  &:focus,  &:active    // State styles
  // Modifiers  &--variant    // Modifier styles
  // Media queries  +respond-to("md")    // Responsive styles

Functions

sass
// _functions.sass
// Color functions@function tint($color, $percentage)  @return mix(white, $color, $percentage)
@function shade($color, $percentage)  @return mix(black, $color, $percentage)
// Unit conversion@function px-to-rem($px, $base: 16)  @return ($px / $base) * 1rem
@function rem-to-px($rem, $base: 16)  @return ($rem / 1rem) * $base * 1px
// Spacing helper@function spacing($multiplier)  @return $spacing-unit * $multiplier
// Usage.element  background: tint($color-primary, 20%)  border-color: shade($color-primary, 10%)  font-size: px-to-rem(18)  padding: spacing(3)

Placeholders and Extend

sass
// Define placeholders%clearfix  &::after    content: ''    display: table    clear: both
%list-reset  list-style: none  margin: 0  padding: 0
%button-reset  appearance: none  background: none  border: none  padding: 0  font: inherit  cursor: pointer
// Usage.container  @extend %clearfix
.nav-list  @extend %list-reset
.icon-button  @extend %button-reset

Loops and Iteration

Generate Utility Classes

sass
// Spacing utilities$directions: ("": "", "t": "-top", "r": "-right", "b": "-bottom", "l": "-left")
@each $abbr, $dir in $directions  @for $i from 0 through 8    .m#{$abbr}-#{$i}      margin#{$dir}: spacing($i)    .p#{$abbr}-#{$i}      padding#{$dir}: spacing($i)
// Color utilities@each $name, $color in $colors  .text-#{$name}    color: $color  .bg-#{$name}    background-color: $color

Grid Generation

sass
$grid-columns: 12
@for $i from 1 through $grid-columns  .col-#{$i}    width: percentage($i / $grid-columns)
// Responsive columns@each $bp, $width in $breakpoints  @media (min-width: $width)    @for $i from 1 through $grid-columns      .col-#{$bp}-#{$i}        width: percentage($i / $grid-columns)

Conditionals

sass
=theme-button($variant)  @if $variant == "primary"    background: $color-primary    color: white  @else if $variant == "secondary"    background: transparent    color: $color-primary    border: 2px solid $color-primary  @else if $variant == "danger"    background: $color-error    color: white  @else    background: $color-text-muted    color: white
.btn-primary  +theme-button("primary")
.btn-secondary  +theme-button("secondary")

Modern Module System

Using @use and @forward

sass
// _variables.sass$primary: #3498db
// _mixins.sass@use 'variables' as vars
=themed-element  color: vars.$primary
// _index.sass (barrel file)@forward 'variables'@forward 'mixins'
// main.sass@use 'abstracts'
.element  +abstracts.themed-element

Performance Tips

  • Keep selector specificity low (prefer single class selectors)
  • Avoid !important except for utility overrides
  • Use @use instead of deprecated @import
  • Limit @extend usage across files
  • Compile without source maps in production
  • Let autoprefixer handle vendor prefixes

Code Style Guidelines

  • Use 2 spaces for indentation (critical in Sass)
  • Use single quotes for strings
  • One blank line between rule sets
  • Group related properties together
  • Comment non-obvious code
  • Use meaningful variable names
  • Keep lines under 80 characters when possible

Property Order

sass
.element  // Positioning  position: relative  top: 0  right: 0  z-index: 10
  // Display & Box Model  display: flex  width: 100%  padding: $spacing-md  margin: $spacing-sm 0
  // Typography  font-family: $font-family-base  font-size: $font-size-base  line-height: $line-height-base  color: $color-text
  // Visual  background: $color-background  border: 1px solid $color-border  border-radius: $border-radius-md  box-shadow: $shadow-sm
  // Animation  transition: all $transition-base
  // Misc  cursor: pointer

來源與署名

來源：mindrally/skills位於sass-best-practices提交9718410

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 mindrally/skills 的技能

Zustand State Management

mindrally

為 React 與 TypeScript 應用程式中的 Zustand 狀態管理提供設計與使用規範。

Software Development2695 週前更新

Zod Schema Validation

mindrally

關於 Zod 結構描述驗證與 TypeScript 型別推斷的實務指引。

Software Development2695 週前更新

Woocommerce

mindrally

針對 WordPress 與 WooCommerce 外掛開發的指南，涵蓋 PHP 規範、鉤子、安全性與擴充模式。

Software Development2695 週前更新

Wordpress

mindrally

以 PHP 規範、安全實務與測試慣例指導 WordPress 與 WooCommerce 開發。

Software Development2695 週前更新

Websocket Development

mindrally

使用 WebSocket 通訊建構即時應用程式的最佳實務與指引。

Software Development2695 週前更新

Web Development

mindrally

提供 Bootstrap、Django、HTMX 以及一般 Web 最佳實務的 Web 開發指南。

Software Development2695 週前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新