参考: http://book.scss.jp/code/c6/01.html
http://www.webdesignleaves.com/wp/htmlcss/652/
- Compassとは：Sass(SCSS)のコンパイラー
- 今更感もありますが、Sassの直接コンパイルよりも一回り拡張性があり、gulpなど大掛かりなタスクランナーよりも設定が簡易。
a.ito BoxPistols
BoxPistols
/ オープンギスト
Last active
August 29, 2015 14:24
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 書いてみます。 | |
| <h1>ギス</h1> | |
| 差異 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>レスポンシブメニュー</title> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="menu-box"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); | |
| /* Grid CSS Calender ========================================================================== */ | |
| .cmp__calender { | |
| max-width: 500px; | |
| width: 100%; | |
| margin: 0 auto; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| } |
BoxPistols
/ file0.txt
Last active
June 23, 2018 19:52
Compass導入ガイド ref: https://qiita.com/AsagiriDesign/items/db12237796d1e7c9e632
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # パス指定 | |
| http_path = "/" | |
| css_dir = "css" | |
| sass_dir = "sass" | |
| images_dir = "img" | |
| javascripts_dir = "js" | |
| # オプション | |
| output_style = :expanded | |
| line_comments = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Bauhaus</h1> | |
| <h2>Asagiri Design</h2> | |
| <svg> | |
| <polygon id="triangle" points="400,100 140, 550 660,550"/> | |
| </svg> | |
| <svg><use xlink:href="#triangle" /></svg> | |
| <svg><use xlink:href="#triangle" /></svg> | |
| <svg><use xlink:href="#triangle" /></svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button data-iziModal-open=".iziModal">Click</button> | |
| <div class="iziModal" data-izimodal-title="Header Title" data-izimodal-subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."> | |
| <p>Dummy Contents</p> | |
| </div> | |
| <div class="iziModal" data-izimodal-title="No1" data-izimodal-subtitle="Sub Title"> | |
| <p style="text-align:center;padding:10px;">Dummy Contents<br> Photo | |
| </p> | |
| <figure style="text-align:center;"><img src="https://picsum.photos/600/600?image=1083" alt="uzurea icon" width="400" height="400" /></figure> | |
| </div> |
OlderNewer