抑郁症健康 > css预处理器：Sass LASS Stylus

css预处理器：Sass LASS Stylus

时间：2022-09-19 03:16:59

相关推荐

语法

Sass

h1 {color: #0982C1;}

h1color: #0982c1

LESS

h1 {color: #0982C1;}

Stylus

/* style.styl */h1 {color: #0982C1;}/* omit brackets */h1color: #0982C1;/* omit colons and semi-colons */h1color #0982C1

变量

Sass

$mainColor: #0982c1;$siteWidth: 1024px;$borderStyle: dotted;body {color: $mainColor;border: 1px $borderStyle $mainColor;max-width: $siteWidth;}

LESS

@mainColor: #0982c1;@siteWidth: 1024px;@borderStyle: dotted;body {color: @mainColor;border: 1px @borderStyle @mainColor;max-width: @siteWidth;}

Stylus

mainColor = #0982c1siteWidth = 1024px$borderStyle = dottedbodycolor mainColorborder 1px $borderStyle mainColormax-width siteWidth

输出结果

body {color: #0982c1;border: 1px dotted #0982c1;max-width: 1024px;}

嵌套

嵌套语法

section {margin: 10px;nav {height: 25px;a {color: #0982C1;&:hover {text-decoration: underline;}}}}

输出结果

section {margin: 10px;}section nav {height: 25px;}section nav a {color: #0982C1;}section nav a:hover {text-decoration: underline;}

mixins（混入）

SASS

/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;@ include error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;@ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/}

LASS

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;.error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */}

STYLUS

/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */}

输出结果

.generic-error {padding: 20px;margin: 4px;border: 2px solid #f00;color: #f00;}.login-error {left: 12px;position: absolute;top: 20px;border: 5px solid #f00;color: #f00;}

继承

SASS & STYLUS

.block {margin: 10px 5px;padding: 2px;}p {@extend .block; /* Inherit styles from '.block' */border: 1px solid #EEE;}ul, ol {@extend .block; /* Inherit styles from '.block' */color: #333;text-transform: uppercase;}

输出结果

.block, p, ul, ol {margin: 10px 5px;padding: 2px;}p {border: 1px solid #EEE;}ul, ol {color: #333;text-transform: uppercase;}

LESS

.block {margin: 10px 5px;padding: 2px;}p {.block; /* Inherit styles from '.block' */border: 1px solid #EEE;}ul, ol {.block; /* Inherit styles from '.block' */color: #333;text-transform: uppercase;}

输出结果

.block {margin: 10px 5px;padding: 2px;}p {margin: 10px 5px;padding: 2px;border: 1px solid #EEE;}ul,ol {margin: 10px 5px;padding: 2px;color: #333;text-transform: uppercase;}

颜色函数

SASS

lighten($color, 10%); /* returns a color 10% lighter than $color */darken($color, 10%); /* returns a color 10% darker than $color */saturate($color, 10%); /* returns a color 10% more saturated than $color */desaturate($color, 10%); /* returns a color 10% less saturated than $color */grayscale($color); /* returns grayscale of $color */complement($color); /* returns complement color of $color */invert($color);/* returns inverted color of $color */mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% *//*示例*/$color: #0982C1;h1 {background: $color;border: 3px solid darken($color, 50%);}

LESS

lighten(@color, 10%); /* returns a color 10% lighter than @color */darken(@color, 10%); /* returns a color 10% darker than @color */saturate(@color, 10%); /* returns a color 10% more saturated than @color */desaturate(@color, 10%); /* returns a color 10% less saturated than @color */spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */mix(@color1, @color2); /* return a mix of @color1 and @color2 */@color: #0982C1;h1 {background: @color;border: 3px solid darken(@color, 50%);}

STYLUS

lighten(color, 10%); /* returns a color 10% lighter than 'color' */darken(color, 10%); /* returns a color 10% darker than 'color' */saturate(color, 10%); /* returns a color 10% more saturated than 'color' */desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

color = #0982C1h1background colorborder 3px solid darken(color, 50%)

运算符

body {margin: (14px/2);top: 50px + 100px;right: 100px - 50px;left: 10 * 10;}

浏览器相关处理

SASS

@mixin border-radius($values) {-webkit-border-radius: $values;-moz-border-radius: $values;border-radius: $values;}div {@ include border-radius(10px);}