I have some LESS which is formatted with spaces between the selectors, and braces on a new line.
body {
background-color: #3a3a3a;
font-family:Verdana;
}
header
{
background-color: rgba(40, 40, 40, 0.7);
position: relative;
z-index: 100;
}
#companyLogo
{
margin-top:15px;
margin-bottom:10px;
margin-left:10px;
}
When you view the less through the chrome debugger, it comes through with different spacing, which throws the line numbers way off.
body {
background-color: #3a3a3a;
font-family: Verdana;
}
header {
background-color: rgba(40, 40, 40, 0.7);
position: relative;
z-index: 100;
}
#companyLogo {
margin-top: 15px;
margin-bottom: 10px;
margin-left: 10px;
}
This is the Gruntfile.js i'm using to build the less
module.exports = function (grunt) {
grunt.initConfig({
watch: {
less: {
files: ["css/*.less"],
tasks: ["less"],
options: {
livereload: true,
}
}
},
less: {
development: {
options: {
sourceMap: true,
//sourceMapFileInline: true,
sourceMapBasepath: "css/",
sourceMapURL: "style.css.map",
sourceMapFilename: "css/style.css.map"
},
files: {
"css/style.css": "css/style.less"
}
},
compressed:
{
options: {
sourceMap: true,
//sourceMapFileInline: true,
compress: true,
sourceMapBasepath: "css/",
sourceMapURL: "style.min.css.map",
sourceMapFilename: "css/style.min.css.map"
},
files: {
"css/style.min.css": "css/style.less"
}
}
}
});
// The following line loads the grunt plugins.
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};
Is there any way around this?
It sucks having to do a find on the selector instead of going straight to a line when working in the css.
The solution I'm going with for now is to format the less to match what chrome expects with opening braces on the same line as the selector.
Related
I'm trying to convert my sass file to css using gruntjs.
This is my Gruntfile.js :
module.exports = function(grunt) {
const sass = require('node-sass');
// require('load-grunt-tasks')(grunt);
// Configuration
grunt.initConfig({
// pass in options to plugins
// refenrece to files etc
sass: {
options: {
implementation: sass
},
dist: {
files: [{
src: 'sass/*.scss',
dest: 'css/main.css'
}]
}
}
});
// Load plugins
grunt.loadNpmTasks('grunt-sass');
// Register tasks
grunt.registerTask('convert-sass', 'sass');
}
When I run grunt convert-sass. The task is finished successfully. But the main.css is always empty.
Is there any other configuration that I missed ?
I have tried to add sourcemap: true and changed
files: [{
'css/main.css': 'sass/*.scss'
}]
but it's still empty
These are my sass files (located in sass directory)
adimixins.scss :
#mixin vishovact ($link_color, $visit_color, $hover_color, $active_color) {
a {
color: $link_color;
&:visited {
color: $visit_color;
}
&:hover {
color: $hover_color;
}
&:active {
color: $active_color;
}
}
}
style.scss:
#import 'adimixins';
$base-color: #7FFFD4;
$second-color: #FF00FF;
$mybackground: #008B8B;
// Buat satu biji kelas
.adi-class {
width: 100px;
height: 80px;
background: $mybackground;
#include vishovact('blue', 'red', 'yellow', 'green');
p {
color: $second-color;
}
}
*any help will be appreciated
Finally, after several trials. I realized that no need to convert the mixins.scss. Because it's already converted automatically. So I change the src: 'sass/*.scss' to src: 'sass/styles.scss', and it finally works. Here's the output of converted css file:
.adi-class {
width: 100px;
height: 80px;
background: #008B8B; }
.adi-class a {
color: "blue"; }
.adi-class a:visited {
color: "red"; }
.adi-class a:hover {
color: "yellow"; }
.adi-class a:active {
color: "green"; }
.adi-class p {
color: #FF00FF; }
check ruby with ruby -v (install ruby )
Install Sass with sudo gem install sass (install sass )
setting for Grunt Tasks & run grunt convert-sass
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'sass',
src: ['**/*.scss'],
dest: 'css',
ext: '.css'
}]
}
}
});
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-sass');
// Register Grunt tasks
grunt.registerTask('convert-sass', 'sass');
};
In gruntfile
stylelint: {
all: ['app/styles/**/*.scss']
},
.stylelintrc
{
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"plugin/selector-bem-pattern": {
"componentName": "[A-Z]+",
"componentSelectors": {
"initial": "^\\.{componentName}(?:-[a-z]+)?$",
"combined": "^\\.combined-{componentName}-[a-z]+$"
},
"utilitySelectors": "^\\.util-[a-z]+$"
}
}
}
/Users/jitendravyas/app-test/styles/components/_campaign-settings-integrations.scss
/* #define campaign-settings */
.campaign-settings__integrations {
#include flex;
}
.campaign-settings__integration {
border: 1px solid $color-green;
border-radius: 3px;
color: $color-green;
margin-right: $base-spacing-unit;
#include flex;
.check {
background: $color-green;
color: white;
#include vertical-center;
}
> div {
padding: $half-spacing-unit;
}
}
Not getting any error when I run stylelint. Stylelint is working with other rules.
I believe you have incorrectly defined your component name. As such, the linter is correctly skipping over the file.
You must use either a concise or verbose syntax:
/** #define campaign-settings */
or
/* postcss-bem-linter: define campaign-settings */
At the moment you appear to use an invalid form of the concise syntax i.e. your comment begins with /*, rather than /**.
I am using less, postcss and cssnano (version 3.7.3). In less, I am using classes which inherit from a shared base and overriding some of the properties when needed. I am finding that cssnano is reordering the inherited\overridden properties causing unexpected differences in the style.
A trimmed down example .less looks like this:
.cell-label {
font-size: 11px;
}
.heading-label-cell {
.cell-label;
color: #heading-colour;
font-size: 13px;
}
.question-label-cell {
.cell-label;
color: #question-colour;
}
Which is then expanded to css looking like:
.heading-label-cell {
font-size: 11px;
font-size: 13px;
color:#616161;
}
.question-label-cell {
font-size: 11px;
color: #0073d6;
}
But cssnano then does the following which has reordered the font-size property:
.heading-label-cell {
color:#616161;
font-size:13px
}
.heading-label-cell,.question-label-cell {
font-size:11px;
}
.question-label-cell {
color:#0073d6
}
Is there a different way I am expected to do inheritance/overrides that doesn't suffer this problem or is the fault in cssnano?
Reordering CSS properties is not always a safe operation, but it is enabled in the default preset. If you encounter problems, with it, disable it. This optimisation is called cssDeclarationSorter.
For example, the options to call cssnano with:
{
preset: [
'default',
{ cssDeclarationSorter: false }
]
}
Or if you use cssnano as a plugin for postcss, this is postcss.config.js:
module.exports = {
plugins: {
cssnano: {
preset: [
'default',
{ cssDeclarationSorter: false }
]
}
}
}
I'm working with LESS and I'd like to run grunt-autoprefixer on my LESS markup WITHOUT compiling LESS, because my LESS is compiled on my CMS automatically.
Is this possible?
Here's my Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
concat: {
sqs_template: {
src: ['js/one.js', 'js/two.js'],
dest: 'sqs_template/scripts/app.js',
},
},
autoprefixer: {
options: {
remove: true,
},
multiple_files: {
expand: true,
flatten: true,
src: 'css/*.less',
dest: 'sqs_template/css/',
},
},
watch: {
js: {
files: ['js/**/*.js'],
tasks: ['concat'],
},
css: {
files: ['css/**/*.less'],
tasks: ['autoprefixer'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Here's an example of the LESS I'm trying to prefix:
//------------------------------------*\
// SOME CSS
//------------------------------------*/
// Variables
#site-width: 960px;
#color: #333333;
// Mixins
.some-font {
font-family: sans-serif;
font-size: 1.5rem;
font-weight: bold;
}
.some-container {
display: flex;
max-width: #site-width;
margin: 0 auto;
.some-container-inner {
p {
.some-font;
color: #color;
}
}
}
I would want grunt-autoprefixer to do nothing but prefix my LESS, and put it into the sqs_template folder. Right now, grunt-autoprefixer errors because it doesn't seem to recognize the variables or mixins.
Is this possible?
Thanks!
Instead of autoprefixing, you could use mixins to prefix the needed values yourself. There's LESS-Prefix library that contains mixins for the usual suspects.
As a simple example, if you are using LESS-Prefix (or have a similar mixin yourself), you can just include the mixin file and type the CSS-properties prepended by a .
div {
.box-shadow(0px 0px 10px rgba(255,0,0,.5));
}
which passes the values through this mixin:
.box-shadow(#args) {
-webkit-box-shadow: #args;
box-shadow: #args;
}
and you'll end up with this:
div {
-webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}
I am trying to update the style of my navbar in Bootstrap. This is easy if I just make a new file main.css, import bootstrap.min.css, and add the properties I want:
// main.css
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
However, when I try to put the same properties in navbar.less and then compile it (instead of using main.css), the changes don't work:
// bootstrap/less/navbar.less
.navbar-header {
// BEGIN CUSTOM STYLES
float: left;
padding: 15px;
text-align: center;
width: 100%;
// END CUSTOM STYLES
&:extend(.clearfix all);
#media (min-width: #grid-float-breakpoint) {
float: left;
}
}
Can anyone tell me why this is happening?
This was an issue regarding grunt. I was using bootstrap.min.css in my page, and grunt was not minifying the compiled bootstrap.css.
I was using grunt watch to compile the files automatically. However, the default grunt configuration I was using did not run the css:minifyCore task. Thus, I had to update a section in Gruntfile.js from this:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: 'less'
}
},
to this:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:minifyCore']
}
},