How to Read This Less CSS

How to read this LESS css?

@1cols etc are just variable names. Variable names in less are allowed to start with numbers.

@1col: @1cols;

That's just making the saying that variable @1col equals the variable @1cols set earlier. Presumably, "1col" because 1 is singular, but the others are plural, so it just gives you the option of using either @1col or @1cols both of them being the same value.

@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;

That's just math. If you want a section that's 3 columns width, that's 3 times the (column width + gutter width) minus one gutter.

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

That's a mixin function that takes a variable number of columns with a default parameter of 1. You can use it like this:

.my-class{
   .width(3);
}
/* these two are identical */
.my-class{
   width: @3cols;
}

The benefit of the first method is that you can replace 3 with a variable so you can use it elsewhere.

Is less interpreted by the browser like CSS?

The example also calls <script src="../../js/less-1.1.3.min.js" type="text/javascript"></script>

Here less-1.1.3.min.js compiles the less from responsive.less to css and return it back to the browser. Also see: http://lesscss.org/#usage

See below you will find the client side compiled CSS between <style id="less:examples-responsive-responsive" type="text/css" media="screen">:

How to implement Read more / Read less in pure CSS

How does the CodePen achieve this behavior?

All that the code in the demo does is modify the max-height of the wrapper div based on the check-box being checked or unchecked and whilst doing so also change the content of the label.

Now lets have a look at the key individual selectors in CSS that help perform this:

.read-more-state:checked ~ .read-more-wrap .read-more-target

• This selector means that when an input with class = 'read-more-state' is checked, select the elements with class = 'read-more-target' which are present under a wrapper with class = 'read-more-wrap' when the wrapper is also a sibling of the checkbox (the reference element).

.read-more-state ~ .read-more-trigger:before

• This is the one that populates the default text for the label. What it does is set the content as "Show more" for the ::before element of label with class = 'read-more-trigger' when the label is also a sibling of the checkbox.

.read-more-state:checked ~ .read-more-trigger:before

• This is the one that modifies the text of the label when the checkbox is clicked. The selector means that when the input with class = 'read-more-state' is :checked, set the content of the label's before element as "Show less".

Also, note the for attribute in the label tag. The value of this field points to the id of the input tag and so whenever the label is clicked, the input element's state gets toggled automatically. This will happen irrespective of where in DOM the label and input elements are.

.read-more-state {  display: none;}.read-more-target {  opacity: 0;  max-height: 0;  font-size: 0;  transition: .25s ease;}.read-more-state:checked ~ .read-more-wrap .read-more-target {  opacity: 1;  font-size: inherit;  max-height: 999em;}.read-more-state ~ .read-more-trigger:before {  content: 'Show more';}.read-more-state:checked ~ .read-more-trigger:before {  content: 'Show less';}.read-more-trigger {  cursor: pointer;  display: inline-block;  padding: 0 .5em;  color: #666;  font-size: .9em;  line-height: 2;  border: 1px solid #ddd;  border-radius: .25em;}/* Other style */
body {  padding: 2%;}p {  padding: 2%;  background: #fff9c6;  color: #c7b27e;  border: 1px solid #fce29f;  border-radius: .25em;}

<div>  <input type="checkbox" class="read-more-state" id="post-1" />
  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span>  </p>
  <label for="post-1" class="read-more-trigger"></label></div>
<div>  <input type="checkbox" class="read-more-state" id="post-2" />
  <ul class="read-more-wrap">    <li>lorem</li>    <li>lorem 2</li>    <li class="read-more-target">lorem 3</li>    <li class="read-more-target">lorem 4</li>  </ul>
  <label for="post-2" class="read-more-trigger"></label></div>

How to show the compiled css from a .less file in the browser?

update

As already pointed out in the comments by @ertrzyiks you should replace less.parse with less.render for Less v 2.x:

var lessCode = '';
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    var options = {}
    lessCode = xmlhttp.responseText;
    less.render(lessCode, options, function (error, output) {
    if(!error) {
    document.getElementById('lesscode').innerHTML = output.css;
    }
    else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
    });

  }
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();

see also: How to detect and print changing variables LESS

But since Less v2:

In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.

When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:

less.pageLoadFinished.then(
    function() {
        console.log(document.getElementById('less:filename').innerHTML);
    }
); 

Notice that the last example also applies the compiled CSS code on the page.

--end update

I expected that running something such as the following was possible:

    <link rel="stylesheet/less" type="text/css" href="important.less">
    <script src="less-1.7.3.js" type="text/javascript"></script>

    <script>
    css = less.tree.toCSS();
    console.log(css);
    </script>

unfortunately this does not work, but you can use the following code to get what you want:

    <script src="less-1.7.3.js" type="text/javascript"></script>
    <script>
    var lessCode = '';
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
        lessCode = xmlhttp.responseText;
        new(less.Parser)().parse(lessCode, function (e, tree) {
        document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
        });

      }
    };
    xmlhttp.open("GET","important.less",true);
    xmlhttp.send();
    </script>

With in the body section of your HTML:

<div id="lesscode"></div>

See also: Combining two .less files in one and How to open a local disk file with Javascript?

Pure CSS - Several Read more Read less

As I asked my question I kept on working on the solution.

Please find snippet in question as the working solution.

Pure CSS Read More/Less button not working

The problem is your label is not in the same level in your site. The operator ~ will target the siblings elements only, not their child or grandchild. Let me explain with the example. Look at the below code.

.test ~ .example {   background:green;}

<p class="test">Test</p><p class="nothing">Nothing</p><p class="example">Example</p><p><span class="example">Second Level Example</span></p>

---

Related Topics