h1 {color: #0982C1;
}

h1color: #0982c1

h1 {color: #0982C1;
}

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

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

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

mainColor = #0982c1
siteWidth = 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;
}

/* 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*/
}

/* 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 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;
}

.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;
}

.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;
}

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%);
}

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%);
}

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;
}

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

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

border-radius(values) {-webkit-border-radius: values;-moz-border-radius: values;border-radius: values;
}div {border-radius(10px);
}

div {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}