webの勉強!!初心者!脱出マニュアル!!

webの勉強を、初心者から脱出するためのメモを残していきます

WEBの勉強~Sass/Ruby~

こんにちは!! メグルです。

 

今日は、昨日の続きで、

sassの設定です。

昨日のうちに大体は終わりました。

ちなみに、rubyにsassを入れるときに、エラーになったので、下のサイトを参考にインストールしました。

インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 - 公式サポートサイト

 

 


これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG

 

実際には上のligの

tep6.実際にSassを使ってみよう!

 

からです。

 

雑学

 

 


CODEPREP -オンラインでプログラミングを学ぼう-

 

sassを使うためには、まずは、rubyをインストールする。

 

インストールする方法はいくつかあるらしいのですが、一番メジャーなのは、

ルビーインストーラーからがいいらしいです。

RubyInstaller for Windows

 

 

しっかりとrubyにsassを入れられると、下記の画面になります。

 

f:id:meglez1:20150130093348p:plain

 

そうしたら、sass -v を入力する。

 

f:id:meglez1:20150130093532p:plain

 

これで、sassを使う準備ができました。

次にkoalaです。

 

f:id:meglez1:20150130093818p:plain

 

ちなみに、英語は最低限の知識は必要らしいです。

やはり英語のサイトが多いので、全て読める必要はないですが、大体は意味を理解できる程度のスキルは必須らしいです。

 

LESS - The Dynamic Stylesheet language

 

sassと似ていて、便利。

 ブートストラップなどで使われているらしいです。

 

まずは新しいフォルダを作成する。

 

#main {
width:600px;

p {
margin: 0 0 1em;

b {
color:#f00;
}
}
}


$red: #f00;

.notes {
color: $red;
}

#nav {
.notesArea {
border: 1px solid $red;
}
}

 

sassというデータからcssファイルに直すことをコンパイルという。

 

上のscssをcssコンパイルすると下のようになる。

 

#main {
width: 600px;
}
#main p {
margin: 0 0 1em;
}
#main p b {
color: #f00;
}

.notes {
color: #f00;
}

#nav .notesArea {
border: 1px solid #f00;
}

/*# sourceMappingURL=style.css.map */

 

 

.sample {
border: {
top: 5px solid #ccc;
bottom: {
width: 3px;
style: doded;
color: black;
}
}
}

 

コンパイル

 

.sample {
border: {
top: 5px solid #ccc;
bottom: {
width: 3px;
style: doded;
color: black;
}
}
}

 

$value: 50px;

.div1 {
width: $value / 2;
}
.div2 {
width: $value * 3 - 30;
}

.div3 {
width: ($value + 50) / 3;
}

 

は、

 

.div1 {
width: 25px;
}

.div2 {
width: 120px;
}

.div3 {
width: 33.33333px;
}

 

次は、継承

 

.box {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

.item {
@extend .box;
}

 

が、

 

.box, .item {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

なります。

 

さらに

.item2 {
@extend .box;
border-color: #red;
}

 

.box, .item, .item2 {
margin: 20px 30px;
padding: 15px;
border: 1px solid #ccc;
}

.item2 {
border-color: #red;
}

 

こうなります。

とても便利ですね!!

次は、ミックスインという機能です。

 

@mixin boxstyle {
padding: 15px;
background: #999;
color: #fff;
}

.botton1 {
@include boxstyle;
}

 

が、

.botton1 {
padding: 15px;
background: #999;
color: #fff;
}

 

こうなります。

 

最初にこういうスタイルのセットがありますよと@mixinで定義する。

 

それを@includeで使っていく。

 

 

//ブレイクポイントを設定 

$bp-tablet: 1024px;

$bp-sp: 64px;
$bp-iphone: 320px;

@mixin media($media-width) {
@if $media-width == sp {
@media screen and (max-width: $bp-sp) {
@content;
}
}
@else if $media-width == iphone {
@media screen and (max-width: $bp-iphone) {
@content;
}
}
@else if $media-width == teblet {
@media screen and (max-width: $sp-tablet) {
@content;
}
}
}

#main {
float: inherit;
width: 610px;
@inclide media(tablet) {
float: none;
margin: 0 auto;
}
@include media(sp) {
width: auto;
margin: 0 10px;
}
@include media(iphone) {
width: 100px;
margin: 0;
}
}

 

 

#main {
float: inherit;
width: 610px;
}
@inclide media(tablet) {
#main {
float: none;
margin: 0 auto;
}
}
@media screen and (max-width: 64px) {
#main {
width: auto;
margin: 0 10px;
}
}
@media screen and (max-width: 320px) {
#main {
width: 100px;
margin: 0;
}
}

 

こうなりますね。