Submit Search
Upload
Sass
•
0 likes
•
275 views
Keisuke Hiraoka
Follow
Sass入門の勉強会用しりょうー
Read less
Read more
Internet
Report
Share
Report
Share
1 of 91
Download now
Download to read offline
Recommended
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
チーム産やさしさが香る フロントエンドコード 〜jshintとscss-lintの ソースをかけて〜
チーム産やさしさが香る フロントエンドコード 〜jshintとscss-lintの ソースをかけて〜
Takuhito Hihara
Introduction to SlideShare for Businesses
Introduction to SlideShare for Businesses
SlideShare
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & Tricks
SlideShare
Getting Started With SlideShare
Getting Started With SlideShare
SlideShare
はじめてのじゃずVol2
はじめてのじゃずVol2
Keisuke Hiraoka
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Recommended
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
チーム産やさしさが香る フロントエンドコード 〜jshintとscss-lintの ソースをかけて〜
チーム産やさしさが香る フロントエンドコード 〜jshintとscss-lintの ソースをかけて〜
Takuhito Hihara
Introduction to SlideShare for Businesses
Introduction to SlideShare for Businesses
SlideShare
How to Make Awesome SlideShares: Tips & Tricks
How to Make Awesome SlideShares: Tips & Tricks
SlideShare
Getting Started With SlideShare
Getting Started With SlideShare
SlideShare
はじめてのじゃずVol2
はじめてのじゃずVol2
Keisuke Hiraoka
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
More Related Content
Featured
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
Featured
(20)
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
Sass
1.
Sass 13年12月6日金曜日
2.
What’s Sass? 13年12月6日金曜日
3.
そもそも 13年12月6日金曜日
4.
CSSは貧弱 13年12月6日金曜日
5.
.button {...} .button
.last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
6.
.button {...} .button
.last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
7.
(ヽ́ω`)グッタリ 13年12月6日金曜日
8.
.button { font-size:
13px; } ... .footer .sub a { font-size: 13px; } ... .button_active .txt p { font-size: 13px; } 13年12月6日金曜日
9.
.button { font-size:
13px; } ... .footer .sub a { font-size: 13px; } ... .button_active .txt p { font-size: 13px; } 13年12月6日金曜日
10.
(ヽ́ω`)グッタリ 13年12月6日金曜日
11.
.button { font-size:
13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } 13年12月6日金曜日
12.
.button { font-size:
13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } <div class=”buttn CtlR”> ... </div> <a href=”#” class=”buttn”> ... </a> <div class=”buttn” data-sid=”i000000”> ... </div> 13年12月6日金曜日
13.
.button { font-size:
13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } <div class=”buttn CtlR”> ... </div> <a href=”#” class=”buttn”> ... </a> <div class=”buttn” data-sid=”i000000”> ... </div> 13年12月6日金曜日
14.
(ヽ́ω`)グッタリ 13年12月6日金曜日
15.
.button { -webkit-border-radius:
3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } 13年12月6日金曜日
16.
.button { -webkit-border-radius:
3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } 13年12月6日金曜日
17.
(ヽ́ω`)グッタリ 13年12月6日金曜日
18.
<head> ... <link
rel="stylesheet" type="text/css" href="../css/s.css" > <link rel="stylesheet" type="text/css" href="style.css" > <link rel="stylesheet" type="text/css" href="../css/sp.css" > <link rel="stylesheet" type="text/css" href="../css/sp_2.css" > <link rel="stylesheet" type="text/css" href="real_s.css" > <link rel="stylesheet" type="text/css" href="common.css" > ... </head> 13年12月6日金曜日
19.
(ヽ́ω`)グッタリ 13年12月6日金曜日
20.
同じことを何度も... クロスブラウザ対応... 管理が...
13年12月6日金曜日
21.
つ Sass 13年12月6日金曜日
22.
What’s Sass? 13年12月6日金曜日
23.
メタ言語 13年12月6日金曜日
24.
CSSの記入を 楽にするもの 13年12月6日金曜日
25.
CSS = Sass
? 13年12月6日金曜日
26.
No 13年12月6日金曜日
27.
Sassのファイルはブラウザで直接読めません 13年12月6日金曜日
28.
13年12月6日金曜日
29.
どうやってコンパイルすんの? 13年12月6日金曜日
30.
13年12月6日金曜日
31.
実際に書いてみる 13年12月6日金曜日
32.
CSS .touch {
... } .touch .button { ... } .touch span { color: #aaa } .touch .txt { ... } .touch a { ... } .touch a:hover { color: #aaa } .touch .sub { ... } .touch > div { color: #aaa } 13年12月6日金曜日
33.
Sass .touch {
... } .touch .button { ... } .touch span { color: #aaa } .touch .txt { ... } .touch a { ... } .touch a:hover { color: #aaa } .touch .sub { ... } .touch > div { color: #aaa } 13年12月6日金曜日
34.
なにも変わっていない... 13年12月6日金曜日
35.
それがいい 13年12月6日金曜日
36.
・覚えたものから使っていける ・環境にそぐわないものは省ける 13年12月6日金曜日
37.
Sassのイケてる機能たち 13年12月6日金曜日
38.
入れ子 13年12月6日金曜日
39.
.button {...} .button
.last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
40.
.button {...} .button
.last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
41.
.button { }
13年12月6日金曜日
42.
.button { .last
{ } .txt { } a { } } 13年12月6日金曜日
43.
.button { .last
{... span {...} } .txt {... .tag {...} p {...} } a {... &:after {...} } } 13年12月6日金曜日
44.
変数 13年12月6日金曜日
45.
.button { font-size:
13px; } .footer .sub a { font-size: 13px; } .button_act .txt p { font-size: 13px; } 13年12月6日金曜日
46.
.button { font-size:
13px; } .footer .sub a { font-size: 13px; } .button_act .txt p { font-size: 13px; } 13年12月6日金曜日
47.
$base_fs = 13px;
13年12月6日金曜日
48.
$base_fs = 13px;
.button { font-size: $base_fs; } .footer .sub a { font-size: $base_fs; } .button_act .txt p { font-size: $base_fs; } 13年12月6日金曜日
49.
継承 13年12月6日金曜日
50.
似たスタイルってできがち 13年12月6日金曜日
51.
.twitter_button { height:
33px; border: 1px solid #000; /* 独自定義 */ } .facebook_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } 13年12月6日金曜日
52.
.twitter_button { height:
33px; border: 1px solid #000; /* 独自定義 */ } .facebook_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } 13年12月6日金曜日
53.
.twitter_button, .facebook_button {
height: 33px; border: 1px solid #000; } . twitter_button { /* 独自定義 */ } .facebook_button { /* 独自定義 */ } 13年12月6日金曜日
54.
%base_button { height:
33px; border: 1px solid #000; } 13年12月6日金曜日
55.
%base_button { height:
33px; border: 1px solid #000; } . twitter_button { /* 独自定義 */ } .facebook_button { /* 独自定義 */ } 13年12月6日金曜日
56.
.base_button { height:
33px; border: 1px solid #000; } . twitter_button { @extend %base_button; /* 独自定義 */ } .facebook_button { @extend %base_button; /* 独自定義 */ } 13年12月6日金曜日
57.
mixin 13年12月6日金曜日
58.
.twitter_button { height:
33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
59.
.twitter_button { height:
33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
60.
.twitter_button { height:
33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
61.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
62.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
63.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
64.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
65.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
66.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
67.
@mixin base_button($bc) {
height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
68.
@mixin border-radius($br) {
-webkit-border-radius: $br; -moz-border-radius: $br; -ms-border-radius: $br; -o-border-radius: $br; border-radius: $br; } 13年12月6日金曜日
69.
インポート 13年12月6日金曜日
70.
<head> ... <link
rel="stylesheet" type="text/css" href="../css/s.css" > <link rel="stylesheet" type="text/css" href="../css/sp.css" > <link rel="stylesheet" type="text/css" href="real_s.css" > <link rel="stylesheet" type="text/css" href="common.css" > ... </head> 13年12月6日金曜日
71.
s.cssだけにしたい... 13年12月6日金曜日
72.
s.scss _sp.scss _real_s.scss
_common.scss 13年12月6日金曜日
73.
s.scss _sp.scss _real_s.scss
_common.scss 13年12月6日金曜日
74.
Sass s.scss CSS
s.css @import "_sp"; @import "_real_s"; @import "_common"; /* _sp.scssに記載した内容 */ /* _real_s.scssに記載した内容 */ /* _common.scssに記載した内容 */ 13年12月6日金曜日
75.
<head> ... <link
rel="stylesheet" type="text/css" href="../css/s.css" > ... </head> 13年12月6日金曜日
76.
導入してみた 13年12月6日金曜日
77.
1 13年12月6日金曜日
78.
書かなくていい 13年12月6日金曜日
79.
書かなくていい - コピペミスが減る
13年12月6日金曜日
80.
書かなくていい - コピペミスが減る
- 記述作業が減る 13年12月6日金曜日
81.
2 13年12月6日金曜日
82.
管理が楽ちん 13年12月6日金曜日
83.
管理が楽ちん - マージ事故が減る
13年12月6日金曜日
84.
管理が楽ちん - マージ事故が減る
- 見通しがよくなる 13年12月6日金曜日
85.
3 13年12月6日金曜日
86.
セマンティック 13年12月6日金曜日
87.
セマンティック 説明すると長いから後でググってください... 「OOCSS
Sass」 13年12月6日金曜日
88.
困ったこと 13年12月6日金曜日
89.
組み方 13年12月6日金曜日
90.
IE 13年12月6日金曜日
91.
おしまい 13年12月6日金曜日
Download now