sass:寫css的一種程式語言,能更快速寫css
scss:在css3出來後延伸sass版本,與sass差別在有{}和;
載入scss檔
@import "檔名";
巢狀結構
父標籤子標籤範例
在scss檔
.con {
....
h2 {
....
}
p {
....
}
}
翻成css檔
.con {
...
}
.con h2 {
...
}
.con p {
...
}
屬性範例
在scss檔
.btn {
text: {
decoration:underline;
transform:lowercase;
}
}
翻成css檔
.btn {
text-decoration:underline;
text-transform:lowercase;
}
&代表父親
class範例
在scss檔
.con {
...
.cat {
...
}
&.can {
...
}
}
翻成css檔
.con {
...
}
.con .cat {
...
}
.con.con {
...
}
動作範例
在scss檔
a {
...
&:hover {
...
}
&:active {
...
}
}
翻成css檔
a {
...
}
a:hover {
...
}
a:active {
...
}
後面運用範例
在scss檔
.sa {
...
.ua & {
...
}
}
翻成css檔
.sa {
...
}
.ua .sa {
...
}
scss參考網址:http://blog.visioncan.com/2011/sass-scss-your-css/
變數
$變數名稱
運用$範例
在scss檔
$b-color:yellow;
a {
color:$b-color;
}
翻成css檔
a {
color:yellow;
}
$變數能設定屬性的值,也能僅設定一個屬性之中一個值
$變數在{}內又定義新值會改變當初全域預設值
#{$變數}
運用#範例
在scss檔
$sa:top;
sup-#{$sa} {
position:relative;
#{$sa}:-0.5em;
}
翻成css檔
sup-top {
position:relative;
top:-0.5em;
}
#{$變數}能用來連接選擇標籤,屬性名稱或字串
Mixin
@mixin
運用@mixin範例
在scss檔
@mixin fun {
$a:10px;
margin-left:$a;
}
div {
@include fun;
}
翻成css檔
div {
margin-left:10px;
}
@mixin傳入參數範例
在scss檔
@mixin fun($a) {
margin-left:$a;
}
div {
@include fun(10px);
}
翻成css檔
div {
margin-left:10px;
}
@mixin傳入多參數範例
在scss檔
@mixin fun($a...) {
transition:$a;
}
div {
@include fun(color 0.3s ease-in,background 0.5s ease-out);
}
翻成css檔
div {
transition:color 0.3s ease-in,background 0.5s ease-out;
}
@mixin預設參數範例
在scss檔
@mixin fun($a:10px) {
margin-left:$a;
}
div {
@include fun;
}
div2 {
@include fun(15px);
}
翻成css檔
div {
margin-left:10px;
}
div2 {
margin-left:15px;
}
@mixin根據關鍵字傳值範例
在scss檔
@mixin fun($a:10px,$b:10px) {
margin-left:$a;
padding:$b;
}
div {
@include fun($b:20px,$a:5px);
}
翻成css檔
div {
margin-left:5px;
padding:20px;
}
接著我試著把上方改成
在scss檔
@mixin fun($a:5px,$b) {
margin-left:$a;
padding:$b;
}
div {
@include fun($b:10px,$a:5px);
}
翻成css檔
錯誤:
Required argument $b must come before any optional arguments.
傳入參數$b必須有對應參數
簡單來說@mixin傳入參數組中如有一個預設值,那大家都要有,否則都無
Extend
@extend
運用@extend範例
在scss檔
.ex_a {
font-size:1em;
}
.b {
@extend .ex_a;
background:#ff0;
}
翻成css檔
.ex_a,
.b {
font-size:1em;
}
.b {
background:#ff0;
}
@extend巢狀範例
在scss檔
.ex_a {
font-size:1em;
h2 {
font-size:2em;
}
}
.b {
@extend .ex_a;
background:#ff0;
}
翻成css檔
.ex_a,
.b {
font-size:1em;
}
.ex_a h2,
.b h2 {
font-size:2em;
}
.b {
background:#ff0;
}
function
@function
運用@function範例
在scss檔
@function b($target,$context) {
@return ($target/$context)*100%;
}
.sidebar {
width:b(350px,1000px);
}
翻成css檔
.sidebar {
width:35%;
}
@function其實跟@mixin一樣
@if,@else if,@else
運用範例
在scss檔
$theme:dark;
header {
@if $theme == dark {
background:#000;
} @else if $theme != black {
background:pink;
} @else {
background:#fff;
}
}
翻成css檔
header {
background:#000;
}
其他常用
@each
運用@each範例
在scss檔
$authors:mile ann;
@each $author in $authors {
.author-#{$author} {
background:url(author-#{$author}.jpg);
}
}
翻成css檔
.author-mile{
background:url(author-mile.jpg);
}
.author-ann{
background:url(author-ann.jpg);
}
@for
運用@for範例
在scss檔
.item {
position:absolute;
right:0;
@for $i from 1 through 3 {
&.item-#{$i} {
top:$i*30px;
}
}
}
翻成css檔
.item {
position:absolute;
right:0;
}
.item.item-1 {
top:30px;
}
.item.item-2 {
top:60px;
}
.item.item-3 {
top:90px;
}
@while
運用@while範例
在scss檔
$i:1;
.item {
position:absolute;
right:0;
@while $i < 4 {
&.item-#{$i} {
top:$i*30px;
}
$i:$i+1;
}
}
翻成css檔
.item {
position:absolute;
right:0;
}
.item.item-1 {
top:30px;
}
.item.item-2 {
top:60px;
}
.item.item-3 {
top:90px;
}
數學與顏色
round($number):4.4=4 4.5=5
ceil($number): 1.2=2
floor($number): 1.2=1
abs($number):|-4|=4
percentage($number):30/100=30%
min($list):在清單中找最小
max($list):在清單中找最大
lighten($color,亮度%)
darken($color,暗度%)
saturate($color,飽和%)
desaturate($color,不飽和%)
mix($color1,$color2,預設合成軸50%)
%越大越往$color1,越小越往$color2
在scss檔
.mix-a {
color:mix(yellow,blue);
}
.mix-b {
color:mix(yellow,blue,50%);
}
.mix-c{
color:mix(yellow,blue,0%);
}
.mix-d{
color:mix(yellow,blue,100%);
}
翻成css檔
.mix-a {
color: #7f7f7f;
}
.mix-b {
color: #7f7f7f;
}
.mix-c {
color: blue;
}
.mix-d {
color: yellow;
}
線上轉css版:http://sassmeister.com/
互動式
@media
運用@media範例
在scss檔
.sa {
border:10px;
@media (min-width:700px) {
float:right;
width:30%;
}
}
翻成css檔
.sa {
border:10px;
}
@media (min-width:700px) {
.sa {
float:right;
width:30%;
}
}
@content
運用@content範例
在scss檔
@mixin re($val,$me) {
@media ($val:$me) {
@content
}
}
.sa {
border:10px;
@include re(min-width,900px) {
float:right;
width:30%;
}
}
翻成css檔
.sa {
border:10px;
}
@media (min-width:900px) {
.sa {
float:right;
width:30%;
}
}
Compass
Compass:撰寫Sass/Scss的外掛包,據說比Sass/Scss更威猛
以下為形容圖((燦笑
我仍愛當新兵CSS,因為不會忘了語法
載入compass
@import "compass"
威猛例子-瀏覽器
在scss檔
@import "compass"
.content {
@include box-sizing(border-box);
}
翻成css檔
.content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
威猛例子-全域變數
在scss檔
@import "compass"
$color:yellow;
a {
color:$color;
}
#t1 {
color:$color;
}
如果想改$color直接在最上方宣告那改變即可
Compass參考網址:http://blog.mukispace.com/compass-for-html-code-project/
Compass CSS參考網址:http://compass-style.org/reference/compass/css3/
留言列表