際際滷

CSS Nite LP, Disk 32: Sass
Why Sass?

Hiroki Tani
Front-end Engineer
CyberAgent, Inc
inkdesign.jp

Sass & Compass莿徃謇T?
CSS のベストプラクティスを�紳覆茲�g�Fするために
�O俐�墳云高望�幄塀氏芙サイバ�`エ�`ジェント�
�O�U?鍬�U�トップスタジオ
圻��Sass and Compass in Action�Manning�
圻广宀�Wynn Netherland/Nathan Weizenbaum/
Chris Eppstein/Brandon Mathis
��顳�莇┌��2,800�劭��
碧��嚠協��264ペ�`ジ
�k佩��咯芙
2014/3/17
�k�嗷莇�

Why need
?
Sassが駅勣なのかなぜ、

What does
Sassは採をしてくれるのか
do?

CSSにプログラムの來�|を嚥える
CSS��メタ冱�Z

CSSに�篳�粡v方、處麻や訳周塀など
プログラムの�C嬬をもたらす、
CSSをより�薦にするための冱�Z

ul {
margin: 0;
padding: 0;
list-style: none;
}
!
li {
display: inline-block;
}
!
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

Nathan Weizenbaum
@nex3
Hampton Catlin
@hcatlin

ul
margin: 0
padding: 0
list-style: none
!
li
display: inline-block
!
a
display: block
padding: 6px 12px
text-decoration: none
.sass

ul {
margin: 0;
padding: 0;
list-style: none;
}
!
li {
display: inline-block;
}
!
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
.scss

.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
!
body {
font: 100% $font-stack;
color: $primary-color;
}

.scss
.container { width: 100%; }
!
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
!
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}

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

How to use
どうやって聞うのか
?
Sassは、

Why Choose
Sassを�xぶのか
?
なぜ、

Don't rely too much on
ただのツ�`ルSassは、

＾If you write poor CSS,
a pre-processor won't make it suck less.￣
- Bermon Painter

.mod_listType1 {
section {
margin-bottom:1em;
}
h1 {
margin:0 0 .5em .5em;
font-size:fz(15);
-webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75);
text-shadow:0px 1px 0px rgba(255,255,255,0.75);
}
ul {
background-color:#ffffff;
border:#c3c3c3 1px solid;
overflow:hidden;
@include radius(12px);
li {
border-top:#C3C3C2 1px solid;
margin-top:-1px;
margin-bottom:1px;
font-size:fz(16);
&:first-child {
a.disable {
@include radius-tr(12px);
@include radius-tl(12px);
}
}
&:last-child {
a.disable {
@include radius-br(12px);
.scss

-webkit-border-radius:42%/50%;
border-radius:42%/50%;
-webkit-text-shadow:none;
text-shadow:none;
font-size:fz(10);
color:#ffffff;
line-height:1;
}
}
}
}
}
/* mod_listType3 */
.mod_listType3 {
@extend .mod_listType1;
ul {
@include radius(0px);
-webkit-box-shadow:none;
box-shadow:none;
li {
a {
&::after {
display:none;
}
}
}
}
}
.scss

.scss/* listType */
.mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5
section, .mod_listType8 section, .mod_listType7 section {
margin-bottom: 1em;
}
.mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8
h1, .mod_listType7 h1 {
margin: 0 0 .5em .5em;
font-size: 15px;
-webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
}
.mod_listType1 ul, .mod_listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8
ul, .mod_listType7 ul {
background-color: #ffffff;
border: #c3c3c3 1px solid;
overflow: hidden;
border-radius: 12px;
}
.mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul
li, .mod_listType7 ul li {
border-top: #C3C3C2 1px solid;
margin-top: -1px;
margin-bottom: 1px;
font-size: 16px;
}
.mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul
li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child
a.disable, .mod_listType7 ul li:first-child a.disable {
}
.mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul
li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child
a.disable, .mod_listType7 ul li:last-child a.disable {

.scss
}
.mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul
li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child
a.disable, .mod_listType7 ul li:last-child a.disable {
}
.mod_listType1 ul li a, .mod_listType3 ul li a, .mod_listType4 ul li a, .mod_listType5 ul li
a, .mod_listType8 ul li a, .mod_listType7 ul li a {
display: block;
width: 100%;
padding: .75em .7em;
box-sizing: border-box;
-webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
position: relative;
}
!
.mod_listType1 ul li a::after, .mod_listType3 ul li a::after, .mod_listType4 ul li
a::after, .mod_listType5 ul li a::after, .mod_listType8 ul li a::after, .mod_listType7 ul li
a::after, .mod_listType8 ul li a::after, .mod_listType9 ul li a::after, .mod_listType11 ul li
a::after, .mod_listType12 ul li a::after, .mod_listType13 ul li a::after, .mod_listType14 ul li a::after {
display: block;
width: 9px;
height: 14px;
position: absolute;
top: 50%;
right: 1em;
margin-top: -10px;
content: "]";
font-size: 12px;
color: brown;
-webkit-text-shadow: none;
text-shadow: none;
}

margin-bottom: 1em;
}
.mod_list__item {
display: list-item;
padding: 0 1em;
line-height: 44px;

CSS Nite LP, Disk 32: Sass
Thanks!
hiloki
inkdesign.jp

際際滷

Why Sass?

More Related Content

Why Sass?