@keio-color: #b10873; .margin0auto { margin: 0 auto; } LessにおけるMixin活用法 – Mach3.laBlog

変数と文字列を連結するには@{ }を使うといい。 .background (@number) { background: url('../img/bg@{number}.png') 70px 65px no-repeat; background-size: 100px 80px; } とすると、 .background(1); という風に書ける。勿論、 .background (@img) { bac…

たとえばこんな感じのあるページのCSSがこのように書かれていたならば、 p.out { ... } div.out { ... } div.in { ... } LESSならこんな風に書いてブロックで完結させることが可能だ。 body.one-page { div.out { ... } div.in { ... } } body.two-page { p.…

あのサイトが@ importを使わない理由｜WEB Drawercssファイルで外部スタイルシートを読みこむ方法には以下の方法がある。 @importを使う方法ですね。たとえば、hoge.cssというファイルに @import "reset.css"; @import "fonts.css"; @import "default.css"; …

section div.section-inner{ position: relative; } section div.section-inner:before{ position: absolute; font-family: "Poiret One","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN W3",Meiryo,"ＭＳ Ｐゴシック",sans-serif; border-bottom: 1px …

CSSをシンプルに書くことができるLESS使ってみた | webOpixel変数はアットマークをつける。 @radius: 5px; @bg-color: #eee; @pad: 10px;Mixinsという機能を利用して関数のようなものを作成し、使うことも出来る。 .transition (@selector: all, @sec: 1s, @…

LESS « The Dynamic Stylesheet language&:をつけると、ネストの中にhoverやbeforeをつけることが出来る。 &をつけると、ネストの中に:hoverや:before(疑似セレクタ)をつけることが出来る。 #header { h1 { font-size: 26px; font-weight: bold; } p { font-…

Less.js Will Obsolete CSS · Dmitry FadeyevlessコードをHTMLページに反映させる。 <script src="./js/less-1.3.0.min.js"></script> <script type="text/javascript"> less.watch(); </script>