LessCss - extending css on the fly - css

I am aware of that you can declare a class :
.someclass { ... }
And then extend it
.otherclass { &:extend(.someclass all) }
But does the .someclass really has to be declared ?
In my case only callers will apply the logic and there is no need for someclass to have the logic declared as well, as it is only a placeholder for similar css.
It would be nice if there was a &:extend(groupingFunction all) .
But maybe there is already?

Currently Less don't support this "placeholder-equivalent".
Checkout this issue: :extend mixins.
You can use the "#import (reference)" feature to somewhat "simulate" this behavior but it can cause unexpected problems in some cases (there are quite a few issues about the import reference feature).

Related

Sass - Prefix all classes imported from file (with sass import or webpack loader)

This question might be pretty stupid and duplicit, but I can't find a working solution to my problem. I'm sorry if this has already been answered somewhere else.
What I'm trying to do is to use 2 css frameworks in one project.
I have to use semantic as my main css framework - this has to be globally accessible. For example element with class "ui grid" should use semanticUI's "ui grid" behaviour.
But then, I want to use Bulma, as my secondary framework. To avoid conflicts, I want to prefix all Bulma classes with a static prefix. So for example Bulma's "modal" class will be accessible as "bulma-modal".
something like this:
.&bulma {
#import '~bulma/bulma';
}
This would (hopefully) avoid all class conflicts and still let me use both semantic and Bulma in the same scope.
Thanks for any help or suggestion.
This framework may be of interest to you https://github.com/Glidias/v-namespace
In combination with using sass:meta to import the stylesheet from node modules in a way which allows it to be nested in the selector hierarchy.
#use "sass:meta";
.bulma {
#include meta.load-css("../node_modules/bulma/sass/helpers/flexbox.sass");
}
.prefix- {
&btn {
}
&nav {
}
}
.prefix-btn {}
.prefix-nav {}
try like this in your bulma scss files
$my-name: mycss--;
.#{$my-name}btn {
...
}
.#{$my-name}input {
...
}
.#{$my-name}header {
...
}

Using BEM CSS with Angular Directives

I've been using BEM style CSS to style my angular directives and usually use replace: true to so that my Block level class can be on the "root" of the custom element. This makes it so that I can write all my CSS primarily with classes.
However, replace: true sometimes causes issues (having two ng-if, etc...) and is now marked as deprecated. So I'm starting to try to stay away from replace completely.
But now I'm having trouble applying BEM to these elements that have an actual custom tag the DOM -- now I have to use a tag name instead of a class name, which means I can't really use BEM anymore (since I'll have to use the tag name since I can't apply classes directly to my element in my template). Additionally, using modifiers on my custom element now seems impossible, as does using sibling CSS selectors.
Here's an example that hopefully will illustrate what I mean:
The directive:
angular.module('my.module')
.directive('customElement', function() {
return {
restrict: 'E',
scope: {
isSpecial: '='
},
template: '<div class="custom-element" ng-class="{\'custom-element--special\': isSpecial"></div>'
};
});
The CSS:
.custom-element {
background-color: white;
}
.custom-element--special {
background-color: red;
}
.custom-element--special + .custom-element--special { // this won't work without replace: true
background-color: blue;
}
If I use replace: true everything works as expected (but then it comes with its own headaches).
If I don't use replace, the classes are not applied to the root custom element so the child selector doesn't work.
I could always add classes to the element in the postLink function, but that makes the template much less clear.
Does anyone have any experience using BEM with angular and using classes instead of tag names in your custom directives? What did you do to solve this problem?
i known it's a problem having replace:false for readability purpose.
The actual problem is that we need our OOCSS but you are handling Angular Components with custom tags has CSS Objects, and is not the case.
There is no practical solution for this, i won't recommend you to start adding classes on postLink function.
However what we are use to do is treat the custom tag as is own CSS Object besides the inner object structure. Forcing us to implement an extra CSS class for the custom tag.
block-context
block-context__element
custom-element
Why doing this when block-context__element is a redundant' class?
Because the rest of your BEM structure is the one you will maintain, the custom-element block should have meaning by it self and the block-context__element element is no expected to, you should abstract the CSS Objects from the directive's implementation, if you in some point start changing your html components your classes should still apply.
I hope this answer helps you

Jasny-Bootstrap using ".offcanvas-sm" in lessfile

I would like to use .offcanvas-sm which is assigned to an <nav> element into the Less file. The Less file looks like:
#import "../../jasny-bootstrap.less";
.test {
.offcanvas-sm;
}
Problem is that the Less processor says - class offcanvas-sm doesn't exist. Its from this "https://github.com/jasny/bootstrap/blob/master/less/offcanvas.less" Less file included in "jasny-bootstrap.less". But how can I import this code to a class?
The compiler is correct there, indeed .offcanvas-sm does not exist in the context you try to invoke it. The key word here is Scope: selectors defined in a media query can be used as a mixin only within this same media query block.
For this particular case extend will do the trick. Scope handling of the extend is somewhat orthogonal to that of mixins, so selectors defined within media query blocks are open for "extending" from an outer scope (but not in opposite):
.test {
&:extend(.offcanvas-sm all);
}
Or just:
.test:extend(.offcanvas-sm all) {
}
---
all keyword is necessary in this case since .offcanvas-sm style is actually a set of two rulesets: .offcanvas-sm and .offcanvas-sm.in

Using less.css and Twitter Bootstrap 3 - mixins not working

Alrighty, so I am trying to add classes to my page via css. Below is an example of the less.css file I am writing:
.someClass {
.col-sm-6;
}
I swear this worked before, but for whatever reason, my compiler throws an error:
".col-sm-6 is undefined"
Compiler: WinLess
Essentially I'm just trying to assign the col-sm-6 class to a div for width/float etc... Please let me know if you can think of any reasons this wouldn't work.
Thanks!
Bootstrap 3 makes these class names via a dynamic mixin, so they are not directly accessible as mixins themselves (dynamically generated class names are not currently able in LESS to be accessed as mixins). Instead, you need to call the mixin to generate the code by doing this:
.someClass {
.make-sm-column(6);
}

Add prefixes to CSS class names using LESS or SASS

I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example).
I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues.
Is there a method via LESS, SASS, or any other compiler that makes it easy for me to add a tb- prefix to all existing classes in Bootstrap?
You could probably do this with SASS
$namespace: "tb";
⌘ + f (or similar) to find all the classes in your CSS file. You're going to probably need a regex (and some trial+error) to find them all.
add .#{$namespace}- to all the classes.
Ideally, you'd get get something like this:
$namespace: "tb";
.#{$namespace}-myClass {
background:pink !important;
}
.#{$namespace}-carousel-module {
width: 25%;
}
compiled to
.tb-myClass {
background:pink !important;
}
.tb-carousel-module {
width: 25%;
}
"Easy" might be a stretch but "easier" seems fitting.
I'm not sure if this is the best approach, in honesty, I'm just ripping off a gist that I saw with comments from people a lot smarter than I am. May come in handy for you though!
You would need to modify the bootstrap code directly, an example of how this could be achieved elegantly in less:
.prefixname {
&-row {
...
}
}
I've added prefix "tb-" to all the bootstrap class (for LESS) in v3.1.0. So after you compile the less files you will get something like ".tb-btn"
You can fork my project at https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-

Resources