• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sassられ指南
 

Sassられ指南

on

  • 5,430 views

at 2011.06.04 UPGRADE JAPAN!!

at 2011.06.04 UPGRADE JAPAN!!

Statistics

Views

Total Views
5,430
Views on SlideShare
2,579
Embed Views
2,851

Actions

Likes
5
Downloads
17
Comments
0

8 Embeds 2,851

http://www.shirokuro331.net 1839
http://d.hatena.ne.jp 586
http://taiju.hatenablog.com 383
http://pc0004169-dev 18
url_unknown 11
https://twitter.com 11
http://hatenatunnel.appspot.com 2
http://counter.hatena.ne.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Sassられ指南 Sassられ指南 Presentation Transcript

    • in UPGRADE JAPAN!! 2011.6.4 sat by @taiju2011 6 6
    • 2011 6 6
    • Agenda2011 6 6
    • Agenda2011 6 6
    • 2011 6 6
    • 2011 6 6
    • $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } }2011 6 6
    • Agenda2011 6 6
    • 2011 6 6
    • 2011 6 6
    • $ sass style.scss:style.css2011 6 6
    • $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } }2011 6 6
    • #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }2011 6 6
    • 2011 6 6
    • $ sass -t compact style.scss:style.css $ sass -t compressed style.scss:style.css $ sass -t expanded style.scss:style.css2011 6 6
    • 2011 6 6
    • $ sass --watch style.scss:style.css2011 6 6
    • Agenda2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • Agenda2011 6 6
    • #contents { ... } #contents .news { ... } #contents .news .twitter { ... } #contents .news .blog { ... } #contents .news .twitter ul { ... } ...2011 6 6
    • 2011 6 6
    • By stevendepolo http://flic.kr/p/81Z1JA2011 6 6
    • By Zoeff http://flic.kr/p/9nd9y62011 6 6
    • #contents { ... .news { ... .twitter { ... ul { ... } } .blog { ... } } }2011 6 6
    • 2011 6 6
    • /* */ /* */ a { h1 { &:link { ... } font: { &:visited { ... } family: Verdana; &:hover { ... } size: 130%; &:active { ... } weight: bold; } } } /* class */ #nav ul li { &.selected { ... } }2011 6 6
    • Agenda2011 6 6
    • #header { background-color: #349ac1; } #footer { background-color: #349ac1; }2011 6 6
    • 2011 6 6
    • By Lara604 http://flic.kr/p/4BnRVs2011 6 6
    • By Zoeff http://flic.kr/p/9nd9y62011 6 6
    • $base-color: #349ac1; #header { background-color: $base-color; } #footer { background-color: $base-color; }2011 6 6
    • 2011 6 6
    • 2011 6 6
    • $body_width: 1100px; $sidenav_width: 200px; #contents { width: $body_width - $sidenav_width; } $base-color: #666; #header { background-color: $base-color; .navigation { background-color: darken($base-color, 40%); } }2011 6 6
    • 2011 6 6
    • Agenda2011 6 6
    • #header { #contents { zoom: 1; zoom: 1; } } #header:after { #contents:after { content: ‘’; content: ‘’; display: block; display: block; clear: both; clear: both; height: 0; height: 0; } }2011 6 6
    • 2011 6 6
    • By mdanys http://flic.kr/p/6JMMkb2011 6 6
    • By Zoeff http://flic.kr/p/9nd9y62011 6 6
    • @mixin clearfix { #header { zoom: 1; @include clearfix; &:after { ... content: ‘’; } display: block; #contents { clear: both; @include clearfix; height: 0; ... } } }2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • Agenda2011 6 6
    • @import “common.css”; @import “home.css”; @import “about.css”; @import “contact.css”; @import “news.css”;2011 6 6
    • 2011 6 6
    • By sahlgoode http://flic.kr/p/8NydEa2011 6 6
    • By Zoeff http://flic.kr/p/9nd9y62011 6 6
    • @import “common.scss”; @import “home.scss”; @import “about.scss”; @import “contact.scss”; @import “news.scss”;2011 6 6
    • 2011 6 6
    • /* HTTP */ @import “common.css”; @import “home.css”; @import “about.css”; @import “contact.css”; @import “news.css”; /* @import scss */ @import “common.scss”; @import “home.scss”; @import “about.scss”; @import “contact.scss”; @import “news.scss”;2011 6 6
    • 2011 6 6
    • 2011 6 6
    • Agenda2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6
    • 2011 6 6