WEBの勉強~Sass/Ruby~
こんにちは!! メグルです。
今日は、昨日の続きで、
sassの設定です。
昨日のうちに大体は終わりました。
ちなみに、rubyにsassを入れるときに、エラーになったので、下のサイトを参考にインストールしました。
インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 - 公式サポートサイト
これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG
実際には上のligの
tep6.実際にSassを使ってみよう!
からです。
雑学
sassを使うためには、まずは、rubyをインストールする。
インストールする方法はいくつかあるらしいのですが、一番メジャーなのは、
ルビーインストーラーからがいいらしいです。
しっかりとrubyにsassを入れられると、下記の画面になります。
そうしたら、sass -v を入力する。
これで、sassを使う準備ができました。
次にkoalaです。
ちなみに、英語は最低限の知識は必要らしいです。
やはり英語のサイトが多いので、全て読める必要はないですが、大体は意味を理解できる程度のスキルは必須らしいです。
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ファイルに直すことをコンパイルという。
#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;
}
}
こうなりますね。