Enviar pesquisa
Carregar
Sass
•
0 gostou
•
332 visualizações
S
Su Ga
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 18
Baixar agora
Baixar para ler offline
Recomendados
Customer relationship mgmt(final)
Customer relationship mgmt(final)
namste
Sesta vezba
Sesta vezba
Maša Hukovic
Noisy neighbors keeping you up
Noisy neighbors keeping you up
Tbacher
Fix it presentation
Fix it presentation
sophie_107
Shinto religonen
Shinto religonen
boamartin
Arturo Ramones orga
Arturo Ramones orga
Arturo Darb
Geography 5 photo journal
Geography 5 photo journal
jher291
E crm final
E crm final
namste
Recomendados
Customer relationship mgmt(final)
Customer relationship mgmt(final)
namste
Sesta vezba
Sesta vezba
Maša Hukovic
Noisy neighbors keeping you up
Noisy neighbors keeping you up
Tbacher
Fix it presentation
Fix it presentation
sophie_107
Shinto religonen
Shinto religonen
boamartin
Arturo Ramones orga
Arturo Ramones orga
Arturo Darb
Geography 5 photo journal
Geography 5 photo journal
jher291
E crm final
E crm final
namste
Shinto religonen
Shinto religonen
boamartin
Maksim dzyuba[qa system]
Maksim dzyuba[qa system]
maksim_dzyuba
Szybkie Pięć Przemian
Szybkie Pięć Przemian
zelaelaelaelaz
Arturo ramones orga
Arturo ramones orga
Arturo Darb
Geography 5ppwrptanastasia aldaco
Geography 5ppwrptanastasia aldaco
beekee03
BUS 100 Presentation
BUS 100 Presentation
jukeboxbaby
Pięć Przemian dla dzieci
Pięć Przemian dla dzieci
zelaelaelaelaz
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
Brandt Elliott
2. modul keuangan lanjutan i
2. modul keuangan lanjutan i
Grace Kerry
새로운 기회, 녹색제품
새로운 기회, 녹색제품
juni988
Piec Przemian - jak zaczac przygode
Piec Przemian - jak zaczac przygode
zelaelaelaelaz
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
First sass
First sass
Toshiaki Sasaki
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Less - first step
Less - first step
Kohki Nakashima
実践Sass 前編
実践Sass 前編
Azusa Tomita
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
Mais conteúdo relacionado
Destaque
Shinto religonen
Shinto religonen
boamartin
Maksim dzyuba[qa system]
Maksim dzyuba[qa system]
maksim_dzyuba
Szybkie Pięć Przemian
Szybkie Pięć Przemian
zelaelaelaelaz
Arturo ramones orga
Arturo ramones orga
Arturo Darb
Geography 5ppwrptanastasia aldaco
Geography 5ppwrptanastasia aldaco
beekee03
BUS 100 Presentation
BUS 100 Presentation
jukeboxbaby
Pięć Przemian dla dzieci
Pięć Przemian dla dzieci
zelaelaelaelaz
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
Brandt Elliott
2. modul keuangan lanjutan i
2. modul keuangan lanjutan i
Grace Kerry
새로운 기회, 녹색제품
새로운 기회, 녹색제품
juni988
Piec Przemian - jak zaczac przygode
Piec Przemian - jak zaczac przygode
zelaelaelaelaz
Destaque
(11)
Shinto religonen
Shinto religonen
Maksim dzyuba[qa system]
Maksim dzyuba[qa system]
Szybkie Pięć Przemian
Szybkie Pięć Przemian
Arturo ramones orga
Arturo ramones orga
Geography 5ppwrptanastasia aldaco
Geography 5ppwrptanastasia aldaco
BUS 100 Presentation
BUS 100 Presentation
Pięć Przemian dla dzieci
Pięć Przemian dla dzieci
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
Wk 6 individual assignment - web-based tutorial - final - brandt elliott
2. modul keuangan lanjutan i
2. modul keuangan lanjutan i
새로운 기회, 녹색제품
새로운 기회, 녹색제품
Piec Przemian - jak zaczac przygode
Piec Przemian - jak zaczac przygode
Semelhante a Sass
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
Hiroki Shibata
First sass
First sass
Toshiaki Sasaki
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Less - first step
Less - first step
Kohki Nakashima
実践Sass 前編
実践Sass 前編
Azusa Tomita
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
CSS3 Design Recipe
CSS3 Design Recipe
Kazunari Hara
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
silvers ofsilvers
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
CSS勉強会
CSS勉強会
Chisa Youzaka
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
CSSの光と闇
CSSの光と闇
Shuma Mizuno
Sassを使ってみよう
Sassを使ってみよう
GIG inc.
Semelhante a Sass
(20)
Sass(SCSS)について
Sass(SCSS)について
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方
First sass
First sass
Css preprocessorの始めかた
Css preprocessorの始めかた
Less - first step
Less - first step
実践Sass 前編
実践Sass 前編
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
壊れやすいCSS
壊れやすいCSS
CSS3 Design Recipe
CSS3 Design Recipe
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
CSS勉強会
CSS勉強会
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
CSSの光と闇
CSSの光と闇
Sassを使ってみよう
Sassを使ってみよう
Último
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
Último
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Sass
1.
sass とは?
2.
css
を 便利に書ける かも?
3.
何が必要?
4.
SCOUT をインストールするだけ! http://mhs.github.com/scout-app/
5.
使い方は… →プロジェクトフォルダを指定 ・変換前のフォルダを指定 (sass) ・変換後のフォルダを指定 (css)
6.
本題
7.
sass で 出来ること 変数、継承、 計算、読み込み
8.
例
9.
セレクタの入れ子
sass css .parent { .parent { margin: 10px; margin: 10px; line-height: 1.4em; line-height: 1.4em; } .child { color: #fff; .parent .child { } color: #fff; }t }
10.
変数 sass
css $x: 100px; p { p { height: 100px; height: $x; } } .variable { .variable { width: 100px; width: $x; } }
11.
継承 sass
css .extend { .extend { color: red; color: red; margin-top: 10px; margin-top: 10px; font-size: 1.2em; } } h2 { h2 { color: red; @extend .extend; margin-top: 10px; height: 100px; height: 100px; } }
12.
計算 ( 数式
) sass css $x: 100px; .calc { .calc { height: $x + 150; height: 250px; } }
13.
計算 ( 色
) sass css a { $link-color: #666; color: #666666; a { } color: $link-color; } a:hover { a:hover { color: #cacaca; color: $link-color + 100; } } a:visited { a:visited { color: mix($link-color, #ff0000, 30%); } color: #d11e1e; }
14.
読み込み
sass css .clearfix { @import "compass"; overflow: hidden; *zoom: 1; .clearfix { } @include clearfix; } .kadomaru { -webkit-border-radius: 50px; .kadomaru { -moz-border-radius: 50px; @include border-radius(50px); -ms-border-radius: 50px; } -o-border-radius: 50px; border-radius: 50px; }
15.
・ global-reset ・css3 の各種ベンダープリフィックス なども一発で書き出し出来ます
16.
他にも色んな機能が満載だけど
17.
後は ggrks ってことで
18.
ご静聴ありがとうございました!
Baixar agora