カテゴリー:
LESS
閲覧数:677 配信日:2014-11-02 23:22
基本
▼/styles.less
/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header{
font-size: 18px;
a{
color: red;
}
}
$ lessc styles.less styles.css
▼/styles.css/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header {
font-size: 18px;
}
header a {
color: red;
}
親要素は&
▼/styles.less
/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header{
font-size: 18px;
a{
color: red;
&:hover{
color:green;
}
}
}
$ lessc styles.less styles.css
▼/styles.css/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header {
font-size: 18px;
}
header a {
color: red;
}
header a:hover {
color: green;
}
プロパティ名の一部を&
▼/styles.less
/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header{
font-size: 18px;
a{
color: red;
&:hover{
color:green;
}
}
}
.button{
&-ok{
color: green;
}
&-ng{
color: red;
}
}
$ lessc styles.less styles.css
▼/styles.css/*
header{
font-size: 18px;
}
header a{
color: red;
}
*/
header {
font-size: 18px;
}
header a {
color: red;
}
header a:hover {
color: green;
}
.button-ok {
color: green;
}
.button-ng {
color: red;
}