Convert CSS fragment to LESS

Question

Convert CSS fragment to LESS

Navigation

#1 by (6 votes)
#2 by (2 votes)

4

I want to pass this CSS to LESS, how would it be in LESS?

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}

css less

asked by Carlos Muñoz 21.01.2016 в 23:46

source

2 answers

2

Since LESS is a superset of CSS that is, the CSS syntax is valid in LESS

Your code

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}

It would be like this in LESS

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}

That is, it does not require any modification. =)

Now if you want to take advantage of the advantages of LESS in front of CSS, you can do it as the response of Daniel Hernández

answered by 22.01.2016 в 00:02

What problems can cause using obsolete javascript functions? how to traverse attributes of a class in C #?

score 6 · Accepted Answer

In less serious like this:

.Item {
    box-sizing: content-box;
    display: inline-block;
    width: 259px;
    margin-right: 2em;
    margin-bottom: 40px;
    &-name {
        margin-bottom: 0;
        margin-top: 0;
        height: 45px;  
        display: -o-inline-box;
    }
    &-price {
        font-family: 'Ubuntu', sans-serif;
        font-size: 1.12em; 
    }
}