狠狠撸

锌褉芯斜谢械屑褘 css
鈼� 袨褌褋褍褌褋褌胁懈械褔械褌泻芯泄褋褌褉褍泻褌褍褉褘
鈼� 袛褍斜谢懈褉芯胁邪薪懈械
鈼� 袧械谢褜蟹褟斜褘褋褌褉芯锌芯屑械薪褟褌褜泻芯写
鈼� 袧械芯斜褏芯写懈屑芯褋褌褜锌懈褋邪褌褜泻芯褋褌褘谢懈
鈼� 孝褉褍写薪芯褋芯褏褉邪薪懈褌褜芯褎芯褉屑谢械薪懈械泻芯写邪
鈼� 袩褉芯懈蟹胁芯写懈褌械谢褜薪芯褋褌褜

屑械褌芯写褘斜芯褉褜斜褘
鈼� 袠褋锌芯谢褜蟹芯胁邪褌褜锌械褉械屑械薪薪褘械
鈼� 袨锌褉械写械谢褟褌褜芯斜谢邪褋褌懈胁懈写懈屑芯褋褌懈
鈼� 袙褘写械谢褟褌褜锌芯胁褌芯褉褘泻芯写邪胁芯褌写械谢褜薪褘械斜谢芯泻懈
鈼� 小谢械写懈褌褜蟹邪薪邪褋谢械写芯胁邪薪懈械屑

褋ss != <褟蟹褘泻锌褉芯谐褉邪屑屑懈褉芯胁邪薪懈褟&驳迟;

褏芯谢懈胁邪褉
LESS
鈼� 袩褉芯褋褌邪褟褍褋褌邪薪芯胁泻邪
鈼� 袩褉芯褋褌芯泄褋懈薪褌邪泻褋懈褋
鈼� 校屑械械褌胁褘锌芯谢薪褟褌褜
javascript
SASS
鈼� 袘芯谢褜褕械胁芯蟹屑芯卸薪芯褋褌械泄
鈼� 袘芯谢械械褋芯胁屑械褋褌懈屑褘泄褋
CSS

褋褌芯懈褌锌芯锌褉芯斜芯胁邪褌褜芯斜邪!

SCSS 鈥� 写懈邪谢械泻褌 SASS
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%); }
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue; }
SASS SCSS

compass
鈼� 袣褉芯褋斜褉邪褍蟹械褉薪褘械褋褌懈谢懈
鈼� 袠褋锌芯谢褜蟹褍械褌 SASS
鈼� 孝褉械斜褍械褌 Ruby

斜邪蟹芯胁褘械胁芯蟹屑芯卸薪芯褋褌懈
&
褋懈薪褌邪泻褋懈褋

胁谢芯卸械薪薪褘械褍褋谢芯胁懈褟
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
LESS CSS

胁谢芯卸械薪薪褘械褍褋谢芯胁懈褟
#navbar {
width: 80%;
height: 23px;
ul { list-style-type:
none; }
li {
float: left;
a { font-weight: bold; }
}
}
#navbar {
width: 80%;
height: 23px; }
#navbar ul {
list-style-type:
none; }
#navbar li {
float:
left; }
#navbar li a {
font-weight:
bold; }
S小SS CSS

褉芯写懈褌械谢褜褋泻懈械褋褋褘谢泻懈
a {
color: #ce4dd6;
&:hover {
color: #ffb3ff; }
&:visited {
color: #c458cb; }
}
a {
color: #ce4dd6; }
a:hover {
color: #ffb3ff; }
a:visited {
color: #c458cb; }
LESS & SCSS CSS

锌械褉械屑械薪薪褘械
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
LESS CSS

锌械褉械屑械薪薪褘械
$main-color: #ce4dd6;
$style: solid;
#navbar {
border-bottom: {
color: $main-color;
style: $style; } }
a {
color: $main-color;
&:hover { border-bottom:
$style 1px; }
}
#navbar {
border-bottom-color:
#ce4dd6;
border-bottom-style:
solid; }
a {
color: #ce4dd6;}
a:hover {
border-bottom: solid
1px; }
S小SS CSS

锌褉懈屑械褋懈
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header { .rounded-corners; }
#/slideshow/sass-less-79424222/79424222/footer { .rounded-corners(10px); }
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; }
#/slideshow/sass-less-79424222/79424222/footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; }
LESS CSS

锌褉懈屑械褋懈
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius:
$radius;
}
#navbar li { @include rounded(top); }
#/slideshow/sass-less-79424222/79424222/footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }
#navbar li {
border-top-radius: 10px;
-moz-border-radius-top: 10px;
-webkit-border-top-radius: 10px; }
border-top-radius: 5px;
-moz-border-radius-top: 5px;
-webkit-border-top-radius: 5px; }
#sidebar {
border-left-radius: 8px;
-moz-border-radius-left: 8px;
-webkit-border-left-radius: 8px; }
S小SS CSS

褎褍薪泻褑懈懈懈芯锌械褉邪褌芯褉褘
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
color: #114411;
border-color:
#7d2717;
}
LESS CSS

褎褍薪泻褑懈懈懈芯锌械褉邪褌芯褉褘
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width +
($n - 1) * $gutter-width;
}
#sidebar { width: grid-
width(5); }
#sidebar {
width: 240px; }
S小SS CSS

褉邪蟹薪褘械褎懈褔懈

LESS.锌械褉械屑械薪薪褘械
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
color: @var; // red
}

LESS.锌械褉械谐褉褍蟹泻邪
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}

LESS.锌械褉械屑械薪薪褘械
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
content: "I am fnord.";
CSS

LESS.邪褉谐褍屑械薪褌褘
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px)
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
CSS

LESS.if
.mixin (@s, @color) { ... }
.mixin (dark, @color) { color:
darken(@color, 10%); }
.mixin (light, @color) { color:
lighten(@color, 10%); }
.mixin (@_, @color) { display:
block; }
@switch: light;
.class {
.mixin(@switch, #888);
}
CSS
.class {
color: #a2a2a2;
display: block;
}

LESS.case
.mixin (@a) when (lightness(@a)
>= 50%)
{ background-color: black; }
.mixin (@a) when (lightness(@a)
< 50%)
{ background-color: white; }
.mixin (@a) { color: @a; }
.class1 {
.mixin(#ddd) }
.class2 {
.mixin(#555) }
CSS
.class1 { background-color: black; color: #ddd; }
.class2 { background-color: white; color: #555; }

LESS.conditions
鈼� .truth (@a) when (@a) { ... }
鈼� .truth (@a) when (@a = true) { ... } //true != 1
鈼� .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } //懈
鈼� .mixin (@a) when (@a > 10), (@a < -10) { ... } // 懈谢懈
鈼� .mixin (@b) when not (@b > 0) { ... }
鈼� @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

LESS.is*
鈼� iscolor()
鈼� isnumber()
鈼� isstring()
鈼� iskeyword()
鈼� isurl()
鈼� ispixel()
鈼� ispercentage()
鈼� isem()

LESS.&
.child, .sibling {
.parent & { color: black; }
& + & { color: red; }
}
.parent .child, .parent .sibling { color: black; }
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling { color: red; }
CSS

LESS.functions
鈼� lighten(@color, 10%); // 褋胁械褌谢械械
鈼� darken(@color, 10%); // 褌械屑薪械械
鈼� saturate(@color, 10%); // 薪邪褋褘褖械薪薪械械
鈼� desaturate(@color, 10%); // 薪邪芯斜芯褉芯褌
鈼� fadeout(@color, 10%); // 锌褉芯蟹褉邪褔薪械械
鈼� fadein(@color, 10%); // 薪邪芯斜芯褉芯褌
鈼� fade(@color, 50%); // 锌褉芯蟹褉邪褔薪芯褋褌褜 = 50%
鈼� spin(@color, 10); // 褋屑械褖械薪懈械芯褌褌械薪泻邪薪邪 +10 谐褉邪写褍褋芯胁
鈼� spin(@color, -10); // 薪邪芯斜芯褉芯褌
鈼� mix(@color1, @color2, @weight); 褋屑械褕邪褌褜胁锌褉芯锌芯褉褑懈懈 50%
鈼� contrast(@color1, @darkcolor, @lightcolor);
// 胁芯蟹胁褉邪褖邪械褌 @darkcolor if @color1 鈥溠徰€泻懈泄鈥� ('luma')
// 懈薪邪褔械 @lightcolor

LESS.functions
鈼� hue(@color); // 芯褌褌械薪芯泻
鈼� saturation(@color); // 薪邪褋褘褖械薪薪芯褋褌褜
鈼� lightness(@color); // 褟褉泻芯褋褌褜
鈼� red(@color); // 泻褉邪褋薪褘泄泻邪薪邪谢
鈼� green(@color); // 蟹械谢械薪褘泄
鈼� blue(@color); // 褋懈薪懈泄
鈼� alpha(@color); // 邪谢褜褎邪
鈼� luma(@color); // 褟褉泻芯褋褌褜 (锌械褉褑械锌褌懈胁薪邪褟)

LESS.functions
鈼� round(1.67); // `2`
鈼� ceil(2.4); // `3`
鈼� floor(2.6); // `2`

LESS.namespaces
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab () { ... }
.citation () { ... }
}
#header a {
color: orange;
#bundle > .button; }

LESS.泻芯屑屑械薪褌邪褉懈懈
鈼� /* 袦芯卸薪芯泻邪泻胁 CSS. */
.class { color: black }
鈼� // 袗屑芯卸薪芯泻邪泻胁褋++
.class { color: white }

LESS.褉邪蟹薪芯械
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
CSS

LESS.褉邪蟹薪芯械
@name: blocked;
.@{name} {
color: black;
}
.blocked {
color: black;
}
CSS

SCSS.&
a {
font-weight: bold;
&:hover { text-decoration:
underline; }
body.firefox & { font-weight:
normal; }
}
a {
font-weight: bold;
text-decoration:
none; }
a:hover {
text-decoration:
underline; }
body.firefox a {
font-weight:
normal; }
SASS CSS

SCSS.namespaces
.funky {
font: 2px/3px {
family: fantasy;
size: 30em;
weight: bold;
}
}
.funky {
font: 2px/3px;
font-family:
fantasy;
font-size: 30em;
font-weight:
bold; }
SCSS CSS

SCSS.&
a {
font-weight: bold;
&:hover { text-decoration:
underline; }
body.firefox & { font-weight:
normal; }
}
a {
font-weight: bold;
text-decoration:
none; }
a:hover {
text-decoration:
underline; }
body.firefox a {
font-weight:
normal; }
SCSS CSS

SCSS.懈薪褌械褉锌芯谢褟褑懈褟
$name: /slideshow/sass-less-79424222/79424222/foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p./slideshow/sass-less-79424222/79424222/foo {
border-color: blue; }
SCSS CSS

SCSS.锌械褉械屑械薪薪褘械
$content: "First content";
$content: "Second content?" !
default;
$new_content: "First time
reference" !default;
#main {
content: $content;
new-content: $new_content;
}
#main {
content: "First
content";
new-content: "First
time reference"; }
SCSS CSS

SCSS.@import
@import "/slideshow/sass-less-79424222/79424222/foo.css";
@import "/slideshow/sass-less-79424222/79424222/foo" screen;
@import "http:///slideshow/sass-less-79424222/79424222/foo.com/bar";
@import url(/slideshow/sass-less-79424222/79424222/foo)
@import "rounded-corners", "text-shadow";

SCSS.@extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

SCSS.@if
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
p { color: green; }
SCSS CSS

SCSS.@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em *
$i; }
}
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
SCSS CSS

SCSS.@each
@each $animal in puma, sea-
slug, egret {
.#{$animal}-icon {
background-image:
url(/slideshow/sass-less-79424222/79424222/&);
}
}
.puma-icon {
background-image:
url(/slideshow/sass-less-79424222/79424222/&)
; }
.sea-slug-icon {
background-image:
url(/slideshow/sass-less-79424222/79424222/&); }
.egret-icon {
background-image:
url(/slideshow/sass-less-79424222/79424222/&
); }
SCSS CSS

SCSS.@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em *
$i; }
$i: $i - 2;
}
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
SCSS CSS

SCSS.胁褘胁芯写
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
#main { color: #fff;
background-color: #000;
}
#main p { width:
10em; }
#main{color:#fff;backgr
ound-color:#000}#main
p{width:10em}
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
:nested :compact
:expanded :compressed

SCSS.褝谢谢懈锌褋懈褋
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px
5px #666, 2px 6px 10px #999);
}
.shadowed {
-moz-box-shadow: 0px
4px 5px #666, 2px 6px
10px #999;
-webkit-box-shadow:
0px 4px 5px #666, 2px
6px 10px #999;
box-shadow: 0px 4px,
5px #666, 2px 6px 10px
#999;
}
SCSS CSS

SCSS.褎褍薪泻褑懈懈
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width +
($n - 1) * $gutter-width;
}
#sidebar { width: grid-
width(5); }
#sidebar {
width: 240px; }
SCSS CSS

泻芯薪褋芯谢褜
鈼� Node.js
npm install less
sudo apt get install node-less
鈼� Ruby gem
gem install sass
gem install compass

屑芯写褍谢懈
鈼� LESS http://drupal.org/project/less
鈼� SASSy http://drupal.org/project/sassy
鈼� SASS http://drupal.org/project/sass
鈼� Live CSS http://drupal.org/project/live_css

懈褌芯谐懈
鈼� 袩械褉褋锌械泻褌懈胁薪芯
鈼� 袧械褋谢芯卸薪芯薪邪褍褔懈褌褜褋褟
鈼� SASS 斜褍写械褌胁 Drupal 8
鈼� 袧械胁褋械写芯褋褌褍锌薪芯薪邪 shared 褏芯褋褌懈薪谐邪褏

褋褋褘谢泻懈
鈼� http://lesscss.org/
鈼� sass-lang.com
鈼� http://compass-style.org/
鈼� http://drupal.org/project/compass

狠狠撸

SASS & LESS

More Related Content

What's hot (7)

Similar to SASS & LESS (20)

SASS & LESS