StartUp Sass + Compass [基本と活用]

大竹孔明

StartUp Sass+Compass

第１回 Creators Meetup :

～基本と活用～

Sunday, 24 February 13

大竹孔明こうめコーディングを中心にWeb制作をしています

Twitter : @Bamboo_CFacebook : komei.otake

ぴっちぴちの22歳です

Arctedarcted.jp

NameCard.jphttp://name-card.jp

擬人化CSSリファレンスサイトhttp://www.facebook.com/

gcss.reference

公開

製作中

現在のキャラの半数が

未亡人

ぴっちぴちの22歳です

ご期待ください！

本日の内容

•基本の記述方法の復習•ファイルの管理と運用の注意点•Compassを使おう

本日の内容

基本の記述方法の復習

ネスト

.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px solid #ededed;

.wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; }}

入れ子に出来る

CSSSCSS

.wrap { width: 80px; height: 80px; .inner { border: 1px .. }}

.wrap { width: 80px; height: 80px;}.wrap .inner {border: 1px soli..

@media指定のネスト

.wrap { width: 1000px;}

@media screen and (max-width:600px) {　.wrap { width: 100%; }}

.wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; }}

SCSS入れ子に出来る

CSSSCSS

.wrap { width: 1000px; @media screen a.. width: 100%; }}

.wrap { width: 1000px;}@media screen and..　.wrap { width: 100%; }}

親セレクタの参照

a { display: block;}a:hover { background: #ededed;}

a { display: block; &:hover { background: #ededed; }}

SCSS入れ子に出来る

CSSSCSS

a { display: block; &:hover { background: ... }}

a { display: block;}a:hover { background: # ...}

変数

.wrap { background: #ededed;}.wrap a { color: green;}

$mainColor: #ededed;$keyColor: green;

.wrap { background: $mainColor; a { $keyColor: green; } }

.wrap { background: $mainColor; a { color: $keyColor; } }

定義した値を

.wrap { background: $mainColor; a { color: $keyColor; } }

指定できる

CSSSCSS$mainColor: #ede..$keyColor: green;

.wrap { background: $.. a { $keyColor: g.. } }

.wrap { background: #..}.wrap a { color: green;}

演算

.wrap { width: 80px; padding: 10px;}

$widthType1: 100px;

.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}

$widthType1: 100px;

.wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1;}

SCSSマイナス

乗算

CSSSCSS$widthType1: 100..

.wrap { $paddingType1 .. width: $widthTy .. padding: $padd ..}

.wrap { width: 80px; padding: 10px;}

Mixin（ミックスイン）

@mixin rounded-top { $side: top; $radius: 10px;

border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}

#navbar li { @include rounded-top;}

@mixin rounded-top { $side: top; $radius: 10px;

border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}

#navbar li { @include rounded-top;}

SCSS@mixinでブロックを括って

@includeで呼び出す！

#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}

CSSSCSS@mixin rounded-top { $side: top; $radius: 10px;

border-#{$side}-radius: .. -moz-border-radius-#{$ .. -webkit-border-#{$side} ..}

#navbar li { @include rounded-top ..}

#navbar li { border-top-ra .. -moz-border-r .. -webkit-border ..}

extend（エクステンド）

.button-type1 { width: 100px; border: 1px solid #5f5f5f;}

.button-type2 { @extend .button-type1; border-color: #000;}

値の継承

.button-type2 { width: 100px; border: 1px solid #5f5f5f; border-color: #000;}

CSSSCSS.button-type1 { width: 100px; border: 1px soli ..}

.button-type2 { @extend .button .. border-color: #0 ..}

.button-type1 { width: 100px; border: 1px soli ..}

.button-type2 { width: 100px; border: 1px soli .. border-color: # ..}

ちょっとした注意点

インポレーション

変数はプロパティ名にも使えます

border-#{$side}-radius: $radius;$side: top;

#{} で囲むのをわすれずに！

16進数でカラーを指定

$c1: #fff;

Compile

whiteSunday, 24 February 13

！？

Rubyファイルをごにょごにょすれば

いけるらしいです

www.xenophy.com/sass/4148

#fffffeで逃げるという手ｍ..

ファイルの管理と

運用の注意点

ファイルの管理

先頭にアンダースコア（ _ ）が付いているファイルはコンパイルしてもCSSに変換されない、インポート専用のファイルです。

これを利用して、用途によって切り分けてみましょう。

_mq_tb.scssstyle.scss

_mq_sp.scss

_module.scss

ファイル構成

_mq_tb.scssstyle.scss

_mq_sp.scss

_module.scss

ファイル構成

コンパイルしてもCSSは書き出されない！

読み込み方法

@import “mq_tb”;

拡張子はいらないの？

.scss　　.sass両方いけるように

拡張子は不要な設計となっているようです

Output Style

NESTED

COMPACT

EXPANDED いつもの！

COMPRESSED 高圧縮！

開発時納品時

EXPANDED

COMPRESSED

コメントでしっかり管理

基本編でやったように、

Sassは今までのCSSと

少し書き方が違います

extend

ネスト親要素参照

変数演算

関数

無敵だ

でもちょっと待って下さい

オレオレCSSは考えもの

他のスタッフはおろか

自分すら解読不可能に..

最悪の場合？

コメント管理は必須！

Compile

// のコメントは

SCSSに関するコメント

/**/ のコメントは

CSSに関するコメント

•Sassでの複数ファイルの管理は(_) partials（パーシャル）を使う

•適切なフォーマットでコンパイル•複雑過ぎる記述は避ける•コメントはしっかり残す

Compassを使おう

Compassの初期設定

ターミナルで下記のコマンドを入力

gem update --systemgem install compass

※環境によって sudo を頭につけて実行しないと出来ない場合もあります

早速使ってみましょう！

@importでCompassの機能を使う

@import "compass/css3/border-radius";

@import "compass/css3/";

@import "compass/utilities"

@import "compass"

@import "compass/reset/";

@import "compass"

border-radiusのみインポート

@import "compass"

CSS3に関するミックスインをすべてインポート

@import "compass"

@import "compass/reset/";clearfixなどのユーティリティ系をインポート

@import "compass"

Compassのすべて機能を

インポート

@import "compass"

リセット用CSSをインポート

@compassで全ての機能をインポートできますが、リセットのみは個別でやらないとインポートできないので注意！

Compass

CSS Sprite Tool

っていう位にこの機能が便利

spriteimg

イメージフォルダの直下に

sprite用のフォルダを作成

spriteimg a.png

スプライトにしたい画像を放り込む！

Compile

spriteimg a.png

spritehogehoge.png

なんか出来てる！

早速使ってみよう！

$sprite: sprite-map("hoge/*.png");

画像の結合

sprite画像を入れたフォルダ名

background-image: $sprite;

background-position:

sprite-position($sprite, file-name);

画像の出力

先程作った変数の名前

background-image: $sprite;

background-position:

sprite-position($sprite, file-name);

画像の出力

出力したい画像のファイル名

width: image-width("hoge/file-name.png");

height: image-height("hoge/file-name.png");

横幅や縦のサイズを取得

画像のパス

display: block;

background-repeat: no-repeat;

他にもいくつか指定を加える

Codekitでの利用

CodeKit

黒い画面、怖いですよね？

CodeKitなら

CodeKit に D&D するだけドラッグアンドドロップ

新規にCompassプロジェクトを作成する

既存のプロジェクトでCompassを利用する

Compass をインストールする

Compassを設定する

相対パスにする

Compassを設定する

相対パスにする

CodeKitでできること

•Sassをはじめとする主要な　　　　CSS Preprocesserのコンパイル

•JSのファイルのミニファイ・統合•ブラウザのオートリロード•Compassなどの利用

Bourbon

ありがとうございました！

大竹孔明

StartUp Sass + Compass [基本と活用]

Technology

Transcript of StartUp Sass + Compass [基本と活用]

Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter

[Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass

ускорение Front end разработки с помощью haml, sass и compass. андрей ситник. зал 4

Why Sass? - CSS Nite公式サイト · Sass & Compass徹底入門 CSS のベストプラクティスを効率よく実現するために 監修：石本光司（株式会社サイバーエージェント）

Sass & Compass - CSS für Fortgeschrittene

avec Sass/Compass - static.fnac-static.com · apitre Lorsque les navigateurs ont commencé à interpréter les feuilles de style en cascade, bien des choses ont changé. Je me souviens

avec Sass/Compass - multimedia.fnac.commultimedia.fnac.com/multimedia/editorial/pdf/9782212134179.pdf · apitre Lorsque les navigateurs ont commencé à interpréter les feuilles

SASS e Compass, O CSS Ninja Workflow

Work and play with SASS & Compass

Liebe Dein Frontend wie Dich selbst! HAML & SASS & COMPASS & less

WORKSHOP: CSS-ENTWICKLUNG MIT SASS UND COMPASS - … · Sass und Compass nehmen dem Entwickler zwar nicht die kom-plette Arbeit ab, sind jedoch durchaus eine große Hilfe im Bereich

QConSP 2012: CSS3 com Sass e Compass

Curso CSS3 com Sass e Compass - Aula 01 - Introducão

Sass & Compass / W3CTech Shanghai

P - 1 S B M - boulogne.simplon.coboulogne.simplon.co/wp-content/uploads/2017/04/Sass-_-Compass-Part-1.pdf · Sass (Syntactically Awesome Stylesheets) est un langage de génération

Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza

Alta produtividade com front end com sass e compass

Sass - Introdução

[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

CSS maintenables avec Sass & Compass · Lorsque les navigateurs ont commencé à interpréter les feuilles de styles en cascade, bien des choses ont changé. Je me souviens encore

Why Sass? - CSS Nite公式サイト · Sass & Compass徹底入門 CSS のベストプラクティスを効率よく実現するために監修：石本光司（株式会社サイバーエージェント）