I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
Related
I would like to achieve this mixin natively with Susy:
#mixin mainContainer($width, $maxWidth) {
width: $width;
max-width: $maxWidth;
margin-right: auto;
margin-left: auto;
}
How can I do that?
Thanks!
The only reason to use Susy for this mixin is if you want Susy to provide one of those two values. If you plan to pass in both the width and max-width explicitly as arguments, there's no need to involve Susy at all.
I'll assume you do want Susy to provide one of the values, so I'll just guess which one, and let you change it if I guess wrong. In order to use Susy with customized output, you'll use the container() function instead of the container() mixin:
#mixin mainContainer($max-width, $susy: $susy) {
width: container($susy);
max-width: $max-width;
margin-right: auto;
margin-left: auto;
}
Here is what we are doing:
we are creating a hook to modify the \html\css\common\_mixins.scss file.
The file when deployed is updated. So far so good.
The problem is the CSS files which are importing this mixin are not showing any changes, for example this file - \webapps\ROOT\html\css\taglib\navbar.css.
After some debugging I found that there is a .sass-cache folder in \webapps\ROOT\html\css\taglib\.sass-cache which also has the final generated file navbar.css which is used by the portal.
Now when I deploy the hook all the CSS files which import this mixin are not recompiled/regenerated in .sass-cache folder, which makes the hook useless.
Can somebody tell me if there is any way to make use of this mixin or is there anyother way to do this or may be I can manually recompile all the CSS files using this mixins if only I knew how to.
Also I see that deleting the .sass-cache is not an option since this folder is also used by liferay to patch CSS files if there is a hot-fix.
Environment
Liferay EE 6.2 SP9 bundled with Tomcat
Reason from the comments
The reason why we need to change this file is to have a way to disable responsive elements for the navigation-bar. Or better still disable responsiveness for the whole portal. Since the responsiveness is due to the media-query.
Thanks
It's not possible to alter _mixins.scss via hook, and it's not only due to the evil sass-cache.
_mixins.scss is written is SASS and it needs to be compile and store in sass-cache. Every theme includes compiled version of every sass file.
The only way is to build you own theme and change _mixins.scss or any other file in _diff folder.
Why do you need to alter that particular file?
So the changes were not reflected and I think CSS is not meant for hooking.
So after trying a lot of stuff, still we were not able to disable responsiveness, so we applied the following CSS in our custom.css in our theme. This worked for the navigation bar, for others we can again include those styles individually.
#media (max-width: 979px) {
.navbar .container {
position: initial;
}
.navbar .container .btn-navbar {
color: initial;
display: none;
margin-bottom: initial;
width: initial;
}
.navbar .container .btn-navbar > .icon-bar:first-child {
margin-top: initial;
}
.navbar .container .btn-navbar > .icon-bar:last-child {
margin-bottom: initial;
}
.navbar .container .nav-collapse {
display: initial;
}
.navbar .container .nav-collapse.open {
display: initial;
height: initial;
overflow: initial;
}
.navbar .container .nav-collapse .btn {
padding: initial;
}
.navbar .container .navbar-search {
margin: initial;
padding: initial;
}
.navbar .container .navbar-search .btn,
.navbar .container .navbar-search .btn-link {
clip: none;
position: initial;
}
.navbar .container .navbar-search .form-search {
margin: initial;
}
.navbar .container .navbar-search .form-search .input-append {
display: initial;
padding-right: initial;
}
.navbar .container .navbar-search .form-search .input-append .search-query {
width: initial;
}
}
This CSS code is taken from this Liferay forum post.
I was reviewing UiKit, a frontend framework built with LESS, and noticed a rather interesting feature: hooks. Look at the following in the base framework:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
.hook-panel-badge;
}
.hook-panel-badge() {}
If you want to override that in a theme let's say you are building outside of the core files (files that come later in compilation), then you would do the following:
.hook-panel-badge() {
right:auto;
}
So, in essence it looks like you are able to override/customize selectors without adding in additional selectors, so it keeps your markup as small as possible.
Is anything like this available in SASS? This looks like an awesome feature that I'd love to use as a primarily SASS user, but I haven't found #extend to be the same. Thanks!
Update
The placeholder feature seems to be the closest thing I've found:
.panel {
background:red;
#extend %hook-panel;
}
%hook-panel {
color:blue;
}
Which renders as:
.panel {
background: red; }
.panel {
color: blue; }
and can be defined after (which is awesome), but this still duplicates the selector. Is there anyway to only render the value of the placeholder in the original selector it is included in?
SASS has a similar facility called mixins:
// Define the mixin
#mixin large-text
font-family: Arial
color: #ff0000
// Use it
.page-title
#include large-text
padding: 10px
// Compiled CSS
.page-title {
font-family: Arial;
color: #ff0000;
padding: 10px;
}
The beauty of mix-ins is that they can take arguments, so you don't need to override commonly-changed selectors:
// Define
#mixin sexy-border($color, $width)
border-color: $color
border-width: $width
border-style: dashed
// Paragraphs in general will have a sexy blue 10px dashed border
p
#include sexy-border(blue, 10px)
// Paragraphs of class "plain" will have a plain old black 1px solid border
p.plain
#include sexy-border(black, 1px)
border-style: solid
// Compiled CSS
p {
border-color: blue;
border-width: 10px;
border-style: dashed;
}
p.plain {
border-color: black;
border-width: 1px;
border-style: solid;
}
SASS mixin documentation.
As far as I can see, there's no exact mapping of the LESS behaviour to a SASS equivalent.
You have the following options:
#extend
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#extend .hook-panel-badge;
}
.hook-panel-badge{
right:auto;
}
Resulting in:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.hook-panel-badge, .uk-panel-badge {
right: auto;
}
This produces slightly more CSS than the LESS equivalent does, because the original (unhooked) class is preserved.
#mixin
//theme.scss:
#mixin hook-panel-badge(){
}
#import "hooks";
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook-panel-badge;
}
_hooks.scss:
//theme creator can override hooks in here.
#mixin hook-panel-badge(){
right:auto;
}
This creates the exact same code as your SASS, but the downside is that you need to define a blank mixin for every hookable class, which is a bit of effort. (You could of course put these all in the _hooks.scss file, but that would make the override code harder to read.
EDIT:
I guess there is one more option as below, which saves a little bit of typing on the extendee's side, but moves away from standard CSS syntax for the extender a bit too much for my liking. You could of course use a partial file as in 2.
#mixin hook($class){
//generic override.
#if($class == "uk-panel-badge"){
right:auto;
}
#else if($class== "selector2"){
//override other classes in this way.
}
}
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook("uk-panel-badge");
}
Overall I still feel 1 is the best approach.
I've this mixin applied on a menu, I don't want see on small resolution:
#mixin visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
This working fine. But on bigger resolution I will show this menu. Obviously I can restyle and revert these attributes (I'm allready done it). But I was thinking if is there some built-in way to remove mixins – something like #uninclude visuallyhidden;.
Or is there a better way how to do this?
Thanks for all suggestions.
Use media queries to only apply the styles when appropriate. Doing and undoing bloats your CSS unnecessarily.
#media (max-width: 45em) {
.foo {
#include visuallyhidden();
}
}
I am used to coding in SCSS but pretty new to LESS.
I have the following code in SCSS but would like to know how to write this in LESS.
Here is the SCSS code...
#mixin posL($property, $value) {
{$property}: $value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
#include posL(left, 100px);
}
So far I have something like this in LESS but I have to declare selectors...
.posL(#property: 100px, #value: 2px) {
left: #property;
-rtl-left: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(200px);
}
Is there a better way to write my LESS code so the selectors in the mixin remain generic (not specified)?
Update for LESS 1.6+
It is almost a direct mapping now with the 1.6 update, like so:
LESS
.posL(#property, #value) {
#{property}: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
CSS Output
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}
Original Answer (pre 1.6)
There is currently no real way to do dynamic property names in LESS (whether for prefixing or for full property names ,like you want), though there is discussion about it.
I recommend a generic mixin with a nested, guarded mixin for the logic. This still gives you selection to specific properties, but does require some more explicit code to set it up. Something like:
.posL(#property, #value) {
.getProp(left) {
left: #value;
}
.getProp(-rtl-left) {
-rtl-left: #value;
}
.getProp(#property);
}
Then use it very similar to how you do the SASS version:
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
Compiles to:
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}