Movatterモバイル変換

KEY, PPTX1,133 views

Organizing & Simplifying CSS [with Sass]

The document presents tips on organizing and simplifying CSS using SASS, focusing on design principles, specificity, and the use of CSS meta-frameworks. Key strategies include applying balance and rhythm in styling, ordering properties by specificity, and utilizing SASS features such as nesting, variables, functions, and mixins. It concludes with instructions for installing SASS via HAML.

Technology◦Design◦

Organizing & Simplifying CSS [with Sass]

1.
Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
2.
Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
3.
Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
4.
Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:28:43 -0500 26, 2010 Tue 2010
6.
Gross
7.
TIP #1Use designprinciples
8.
111 2 12Balance 3 .carousel { 4 width:80%;height:50px} 5 6 blockquote 7 { 8 position: relative; 9 padding: 0px; 1 color: #555;Images © Digital Web Magazine 0 }
9.
111 2 12Balance 3 .carousel { 4 width: 80%; 5 height: 50px; 6 } 7 8 blockquote { 9 position: relative; 1 padding: 0;Images © Digital Web Magazine 0 color: #555;
10.
1 11 2 12Rhythm 3 #branding { 4 width: 350px; 5 height: 150px; 6 padding: 0px; 7 position: absolute; 8 top: 15px; 9 left: 20px; 1 background: #c00;Images © Digital Web Magazine 0 color: #fff;
11.
1 11 2 12Rhythm 3 #branding { 4 background: #c00; 5 color: #fff; 6 height: 150px; 7 left: 20px; 8 padding: 0; 9 position: absolute; 1 top: 15px;Images © Digital Web Magazine 0 width: 350px;
12.
111 2 12Proximity 3 #header {…} 4 .error {…} 5 .error p {…} 6 7 .info {…} 8 .error ul {…} 9 .info p {…} 1Images © Digital Web Magazine 0 #header a {…}
13.
111 2 12Proximity 3 .error {…} 4 .error p {…} 5 .error ul {…} 6 7 .info {…} 8 .info p {…} 9 1 #header {…}Images © Digital Web Magazine 0 #header a {…}
14.
TIP #2Order bySpecicity
15.
Hi!</.info {color: green }span { color: red }
16.
Hi!</.info {color: green }span { color: red }
17.
Hi!</.info {color: green }span { color: red }
18.
Point value basedon:Style Attribute 1000 ptsID 100 ptsClass or Attribute 10 ptsElement 1 pt
19.
blockquote 1
20.
blockquote p 2
21.
blockquote p.best 12
22.
blockquote:hover p.best 22
23.
#tagline100
24.
div#tagline 101
25.
div#tagline p:last-child 102
26.
 1000
27.
 1000
28.
111 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…}10 #container {…}
29.
111 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…}10 #container {…}
30.
111 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…}10 #container {…}
31.
111 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…}10 #container {…}
32.
TIP #3Try CSSmeta-frameworks
34.
version 3.0
35.
1 11 2 12Nesting 3 header { 4 font: { 5 size: 18px; 6 weight: bold; 7 } 8 9 h2 { 1 color: blue; 0 }
36.
111 2 12Variables 3 $orange: #c75000; 4 5 body { 6 background: $orange; 7 font-family: $ff; 8 line-height: $lh; 9 } 1 0
37.
111 2 12Math 3 $lh: 20px; 4 5 dl, ol, p, ul { 6 line-height: $lh; 7 margin-bottom: $lh; 8 } 9 1 #container { 0 padding: $lh / 2;
38.
111 2 12Functions 3 $red: #c00; 4 5 a{ 6 color: $red; 7 8 :hover { 9 color: darken($red); 1 } 0 }
39.
111 2 12Mixins 3 @mixin rounded($rad) { 4 -moz-border-radi… 5 -o-border-radius… 6 -webkit-border-r… 7 } 8 9 input[type=“submit”], 1 select, 0 textarea {
40.
111 2 12“SCSS” 3 $lh: 18px; Syntax 4 5 #feature { 6 padding: $lh; 7 width: $lh * 10; 8 9 &:hover { 1 @include rounded; 0 padding: $lh * 2;
41.
111 2 12“SASS” 3 $lh: 18px Syntax 4 5 #feature 6 padding: $lh 7 width: $lh * 10 8 9 &:hover 1 @include rounded 0 padding: $lh * 2
46.
Installing Sass viaHaml$ gem install haml$ mv styles.css styles.scss$ sass --watch styles.scss:styles.css
47.
Installing Sass viaHaml$ gem install haml$ mv styles.css styles.scss$ sass --watch styles.scss:styles.css
48.
Installing Sass viaHaml$ gem install haml$ mv styles.css styles.scss$ sass --watch styles.scss:styles.css
49.
Installing Sass viaHaml$ gem install haml$ mv styles.css styles.scss$ sass --watch styles.scss:styles.css
50.
TIP #1Use designprinciples
51.
TIP #1Use designprinciplesTIP #2Order by speci city
52.
TIP #1Use designprinciplesTIP #2Order by speci cityTIP #3Try CSS meta-frameworks
53.
anks!Any questions? MattPuchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:48:09 -0500 26, 2010 Tue 2010

Editor's Notes

#2 Web craftsmanOne of many software craftspeople at Obtiva
#3 Web craftsmanOne of many software craftspeople at Obtiva
#4 Web craftsmanOne of many software craftspeople at Obtiva
#5 Web craftsmanOne of many software craftspeople at Obtiva
#6 Web craftsmanOne of many software craftspeople at Obtiva
#7 Show of handsGross!Point out nauseating parts; offer tips
#8 Show of handsGross!Point out nauseating parts; offer tips
#9 Steve Smith (Ordered List) gave a talk on &#x201C;Designing Code&#x201D;Don&#x2019;t just write CSS, sculpt it.
#10 Uneven brackets, indentation, spacingNo alignment
#12 Could be whitespace between rulesWithin properties is &#x201C;progressive rhythm&#x201D;&#x2026; How to improve?
#13 Alphabetize!
#14 Items in close proximity to, or aligned with one another, ought to be grouped by similarity..error class in several spots#header in several spots
#15 Now that we are grouping well, be mindful of order
#16 CSS properties are applied based on the specificity of their selector and their order.
#38 Popular &#x201C;frameworks&#x201D; like Blueprint and 960.gs just give us defaults&#x201C;Metaframeworks&#x201D; alter the way we write CSS
#42 Nesting selectors and properties

[8]ページ先頭

Movatterモバイル変換

Change Language

Organizing & Simplifying CSS [with Sass]

Embed presentation

Recommended

More Related Content

What's hot

Similar to Organizing & Simplifying CSS [with Sass]

Recently uploaded

Organizing & Simplifying CSS [with Sass]

Editor's Notes