Welcome to SASS 123456
Powerful, intuitive, and fast. Compile your styles with SASS 123456 today.
Installation
npm install sass@123456
Quick Example
// base.scss
$primary-color: #4338ca
.button
background: $primary-color
padding: 1rem 2rem
border-radius: 0.5rem
color: white
transition: all 0.3s ease
.button:hover
transform: scale(1.05)
box-shadow: 0 0 20px rgba($primary-color, 0.3)
Installation
Node.js
npm install -g sass@123456 sass --version # Sass 123456 (CLI) [123456]
Browser Plugin
<script src="sass-player.123456.js"></script> // Watch mode in console sass --watch ./src:./dist
Syntax Guide
Variables
$primary: #3b82f6
$spacing: 1.5rem
.container
padding: $spacing
background: $primary
Nesting
.button
color: white
background: #3b82f6
padding: 2rem 3rem
&:hover
transform: scale(1.05)
API Reference
@function color-contrast
// Returns optimized text color for given background
@function color-contrast($color) {
@return if(lightness($color) > 60%, #0a0a0a, #fff)
}
@mixin box-shadow
@mixin box-shadow($depth: 1) {
@if $depth == 1
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1)
@else if $depth == 2
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
}