{"id":26026034,"url":"https://github.com/survi218/css-preprocessors-less-sass","last_synced_at":"2026-04-27T18:04:52.395Z","repository":{"id":139642988,"uuid":"92455956","full_name":"survi218/css-preprocessors-less-Sass","owner":"survi218","description":"Less is More!: Less and Sass","archived":false,"fork":false,"pushed_at":"2017-05-26T01:13:05.000Z","size":1036,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-12T22:43:53.109Z","etag":null,"topics":["cascading-style-sheets","css-preprocessor","import","less","less-compiler","less-mixins","less-variables","lessc","lesscss","nesting","nesting-styles","partials","sass"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/survi218.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-26T00:28:09.000Z","updated_at":"2017-05-26T01:13:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"f07910be-f80b-42d8-81aa-a0c96754ca5e","html_url":"https://github.com/survi218/css-preprocessors-less-Sass","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"bd7941185527b67105402d1ba6c2e65cbafd0abd"},"previous_names":["survi218/css-preprocessors-less-sass","surendravidiyala/css-preprocessors-less-sass"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/survi218/css-preprocessors-less-Sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fcss-preprocessors-less-Sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fcss-preprocessors-less-Sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fcss-preprocessors-less-Sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fcss-preprocessors-less-Sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/survi218","download_url":"https://codeload.github.com/survi218/css-preprocessors-less-Sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fcss-preprocessors-less-Sass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262693272,"owners_count":23349708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cascading-style-sheets","css-preprocessor","import","less","less-compiler","less-mixins","less-variables","lessc","lesscss","nesting","nesting-styles","partials","sass"],"created_at":"2025-03-06T14:32:11.127Z","updated_at":"2025-12-30T04:15:41.936Z","avatar_url":"https://github.com/survi218.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Let us learn learn to write Less code and then automatically transform it into the corresponding CSS code. At the end of this project you will be able to:\nWrite Less code using many of the features of Less\nAutomatically convert the Less code into CSS\nAdding Less Variables\nOpen the project folder in Brackets or any other text editor of your choice. In the css folder, create a file named mystyles.less. We will add the Less code into this file.\nAdd the following Less variables into the file:\n\n@white: #ffffff;\n@off-white: #eeeeee;\n@lt-gray: #dddddd;\n@indigo: #303f9f;\n@dark-indigo: #1a237e;\n@light-indigo: #7986CB;\n\n// Height variables\n@carousel-height: 300px;\n\n\n\nWe have just added a few color and a height variable. We will make use of these variables while defining the classes.\nLess Mixins\nNext we add mixing into the file as follows:\n\n\n.zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) {\n  margin:0px auto;\n  padding: @pad-up-dn @pad-left-right;\n}\n\n\nWe will make use of this to define several row classes next.\nUsing the Mixin class that we defined earlier, add the following row classes to the file:\n\n.row-header {\n  .zero-margin();\n}\n.row-content {\n  .zero-margin (50px, 0px);\n  border-bottom: 1px ridge;\n  min-height:400px;\n}\n.row-footer {\n  .zero-margin(20px, 0px);\n  background-color: #AfAfAf;\n}\n.jumbotron {\n  .zero-margin(70px, 30px);\n  background:@light-indigo;\n  color:floralwhite;\n}\n\n\nNote the use of the mixin with various parameters in defining the classes.\nNesting Selectors\nNext we add a carousel class to illustrate the use of nesting of classes in Less, as follows:\n\n.carousel {\n  background:@dark-indigo;\n  .item {\n    height: @carousel-height;\n    img {\n      left: 0;\n      min-height: @carousel-height;\n      position: absolute;\n      top: 0;\n    }\n  }\n}\n\n\nAdd another group of nesting classes with the navbar-inverse class as follows:\n\n.navbar-inverse {\n  background: @indigo;\n  color:@white;\n  .navbar-nav\u003e.active\u003ea {\n    background: @dark-indigo;\n    color: @white;\n    \u0026:hover {\n      background: @dark-indigo;\n      color: @white;\n    }\n    \u0026:focus {\n      background: @dark-indigo;\n      color: @white;\n    }\n  }\n  .navbar-nav\u003e.open\u003ea {\n    background: @dark-indigo;\n    color: @white;\n    \u0026:hover {\n      background: @dark-indigo;\n      color: @white;\n    }\n    \u0026:focus {\n      background: @dark-indigo;\n      color: @white;\n    }\n  }\n  .navbar-nav {\n    .open {\n      .dropdown-menu\u003eli\u003ea {\n        background-color: @indigo;\n        color:@off-white;\n        \u0026:hover {\n          color:#000000;\n        }\n      }\n      .dropdown-menu {\n        background-color: @indigo;\n        color:@off-white;\n      }\n    }\n  }\n}\n\n\nAdd the remaining CSS classes\nFinally we add in those CSS classes which do not fall into any of the above categories. These still use the Less variables, but do not use nesting or mixins:\n\n\naddress {\n  color:#0f0f0f;\n  font-size:80%;\n  margin:0px;\n}\nbody {\n  align:center;\n  padding:50px 0px 0px 0px;\n  z-index:0;\n}\n.tab-content {\n  border-bottom: 1px solid @lt-gray;\n  border-left: 1px solid @lt-gray;\n  border-right: 1px solid @lt-gray;\n  padding: 10px;\n}\n.affix {\n  top:100px;\n}\n#carouselButtons {\n  bottom: 0px;\n  position: absolute;\n  right:0px;\n}\n\n\nInstalling and using the lessc Compiler\nNow we install the node module to support the compilation of the Less file. To do this, type the following at the command prompt:\n\n     npm install -g less\n\nThis will install the less NPM module globally so that it can be used by any project. Note: if you are executing this on a Mac or Linux machine, you may need to add \"sudo\" to the beginning of this command. This will make available the lessc compiler for us so that we can compile Less files.\nNext, go to the CSS folder on your machine and rename the mystyles.css file that you have there as mystyles-old.css. This is to save the CSS file that we have been using so far. We will be creating a new mystyles.css file by compiling the Less file.\nNext type the following at the command prompt to compile the Less file into a CSS file:\n\n\n     lessc mystyles.less \u003e mystyles.css\n\n\nConclusions\nIn this project you learnt to write Less code and then automatically generating the CSS file by compiling the Less code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fcss-preprocessors-less-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurvi218%2Fcss-preprocessors-less-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fcss-preprocessors-less-sass/lists"}