SCSS variables and operators

[maguskrool]

Hello.

I'm trying to organize a website using a responsive grid. I'm using a 12 column grid, and I need to create css classes for different column spans. For simplicity reasons, say both the column and gutter widths are 4%. This way I have 12 columns (12 x 4% = 48%) and 13 gutters (13 x 4% = 52%). The largest content will span 10 columns (and thus 9 inside gutters).

The classes I need are something like

$column-width: 4%;
$gutter-width: 4%;
.col-w1 {
     width: $column-width;
}
.col-w2 {
     width: $column-width * 2 + gutter-width;
}
(...)
.col-w10 {
     width: $column-width * 10 + gutter-width * 9;
}

So every class obeys the following rule: width = $column-width * n + $gutter-width * (n-1), where n is the number of columns.

Having read this great article on Advanced SCSS​,​ I could create these classes automatically by creating a function with arguments like the class prefix, the number of columns and the column and gutter width. Here's what I tried.

$column-width: 4%;
$gutter-width: 4%;
$colsnumbers1: 1 0, 2 1, 3 2, 4 3, 5 4, 6 5, 7 6, 8 7, 9 8, 10 9; // each pair is the number of columns and number of gutters
@mixin method1($prefix, $colwidth, $gutwidth, $colsnumbers1) {
     @each $i in $colsnumbers1 {
          .#{$prefix}#{nth($i, 1)} {
               width: $colwidth * nth($i, 1) + $gutwidth * nth($i, 2);
          }
     }
}
@include method1('col_w',
     $column-width,
     $gutter-width,
     $colsnumbers1
);

This works. However, having to create such a large $colsnumbers1 is not very practical. I tried to simplify it using something like this:

$colsnumbers2: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10; // number of columns. I imagine there's a better way to do this
@mixin method2($prefix, $colwidth, $gutwidth, $colsnumbers2) {
     @each $i in $colsnumbers2 {
          .#{$prefix}#{$i} { // this throws an error on the {$i} part 
               width: $colw * $i + $gutw * ($i-1); // this throws an error on the ($i-1) part
          }
     }
}
@include method2('col_w',
     $column-width,
     $gutter-width,
     $colsnumbers2
);

So my questions are:

1. How to get .#($prefix)#($i) to output .col-w1, .col-w2... col-w10.

2. How to get $i-1 to work correctly.

I'm assuming what I want to achieve is possible. I appreciate all the help you can provide. Thanks.

[BenPleysier · Accepted solution]

Now that CSS GRID is widely supported, I would not go to the trouble of creating your own grid Have a look here for examples Realizing common layouts using CSS Grid Layout - CSS | MDN

There are ways to overcome the problems that you will get with browsers that are not grid-aware.

If you are interested in CSS GRID come back here for solutions to keep all browsers happy.

[maguskrool]

Thank you Ben. I will check out your suggestion.

In the meantime, I'm still trying to figure out if what I wish to do is doable, and how, because that will surely help me in future occasions.

[skylerw87376630]

Is CSS Grid supported in Dreamweaver? I have not been able to get the CSS Grid declarations to work.

[osgood_]

skylerw87376630  wrote

Is CSS Grid supported in Dreamweaver? I have not been able to get the CSS Grid declarations to work.

No, css grid at this time is not supported. It doesnt even have any code hint completions for grid yet - we think that is coming in the next update but its probably going to be a bit longer for the 'live browser' feature to get updated. Currently that uses an outdated browser version which doesnt support grid.

grid is too early yet to use in production in my opinion but there is no reason you can't experiment with it and you should be, it will change the landscape of development methods.

Just check grid in a 'real' browser until such time as it is supported inside of DW..

[pziecina]

osgood_  wrote

grid is too early yet to use in production in my opinion but there is no reason you can't experiment with it and you should be, it will change the landscape of development methods.

I don't think it will change the landscape of web development methods, as just like flexbox too many developers will simply not get it. It is also another of those features that many developers will require some form of 'visual' helpers in order to encourage better adoption.

As for experimenting, i fully agree, but i personally would not use it until at least 75% of a sites user base have browsers that support it, and then i would expect to have to provide 100% fallback. Once css grids reaches 98% though, then any fallback would only be very basic, in that the site should look o/k, but still be fully usable.

[skylerw87376630]

What grid layout system do you recommend? i have been unable to get Sas or scss to work in Dreamweaver?

[pziecina]

I don't recommend any pre/post-processor grid layout system.

Yes, i will agree that css grids can be difficult to learn, especially at the moment when falback is required, but once learned css grids like css flexbox is so easy to use that any complications like those some are suggesting, (using a pre/post-processor) are simply a waste of time and space.

Unless one has a specific requirerment for a pre/post-processor to be used, any advantages in there use is rapidly becomming redundant.

[skylerw87376630]

I apologize I'm new to this. Can you explain what you mean css grid and flexbox? How are those different than css grid layout (one that requires preprocessing)? I mentioned sass and scss because i saw they offer grid layout variables. What is the css grid you use? i want to learn the most fundamental system

[osgood_]

skylerw87376630  wrote

I apologize I'm new to this. Can you explain what you mean css grid and flexbox? How are those different than css grid layout (one that requires preprocessing)? I mentioned sass and scss because i saw they offer grid layout variables

css grid layout doesnt require preprocessing, not sure where you got that information from. It has nothing to do with pre-processing, its just a method of laying out a website using a technique which isnt really ready for production use for a couple of years.

[osgood_]

skylerw87376630  wrote

What grid layout system do you recommend? i have been unable to get Sas or scss to work in Dreamweaver?

I'm not sure what Sass and Scss has got to do with a grid layout system?

I'm not sure anyone really needs to use Sass/Less etc but do so because it's there, I think. The only advantage I can see is if you are working maybe on a very very large site. Since the sites I work on are mainly quite small, only using a few pages to create multiple pages I have not seen a use for such a workflow, although I have experimented with it.

Personally I don't like extra files being in my workflow, it just complicates things, even more so if you try and use this kind of workflow by introducing it through the terminal where all knids of 'foreign' folders and files are created just to do something which in my mind is totally unnecessary in my opinion.

The one good aspect about pre-processing is it does add the needed css prefixes, which are important but you should not have to jump through hoops just to do that. Even Brackets, DW's sister program has a plugin that can update your css in real time, not by processing via another file. I have yet to see a plugin in any other program that can do it quite as simply. It can't be that difficult, so I'm puzzled as to why many of the web-editors on the market fail in that area and show no sign of wanting to provide what is really needed, instead they provide what is optional.

Use your time wisely and learn something that will bring something to the party like php, javascript or jquery etc

Going back to answer your original question - I use my own bespoke css framework/s, it's called coding as opposed to 'painting by numbers' which is what a frameworks generally does.....

[Nancy OShea]

My advice is to learn all you can about modern coding methods but always be mindful of your current target audience & project goals. 

Bootstrap 3.7 is stable in older & modern browsers.  That's why Bootstrap is keeping it alive.

Bootstrap 4's Flexbox layouts work in modern browsers but older IE & Safari have problems with some things.   CSS Grid is something I play around with in my spare time.  But it's not at the top of my list.

[osgood_]

pziecina  wrote

I don't think it will change the landscape of web development methods, as just like flexbox too many developers will simply not get it. It is also another of those features that many developers will require some form of 'visual' helpers in order to encourage better adoption.

Depends really, I fully expect experienced developers to adopt grid as their main layout method just as they have with flexbox or did with floats, I don't speak for those that use visual tool or DW, as they attract a somewhat varied quality of developer if that's a word which can be used in association with such products.

As for experimenting, i fully agree, but i personally would not use it until at least 75% of a sites user base have browsers that support it, and then i would expect to have to provide 100% fallback. Once css grids reaches 98% though, then any fallback would only be very basic, in that the site should look o/k, but still be fully usable.

No way I'm using it in production yet. I may never get to use it if as I expect the time-frame will be a couple of years before browsers which can't support it will be near extinct on peoples devices, or the people using those devices will.

Take me for instance I stil have a version of Safari on my box which doesnt fully support Flexbox. I'm not able to update it and I don't intend to update the OS to do so, much like many others who still have an old browser and using an old OS will not do so. As time goes on that percenatge gets less and less, so the need to avoid using a newer layout method gets less and less.

[pziecina]

osgood_  wrote

Take me for instance I stil have a version of Safari on my box which doesnt fully support Flexbox. I'm not able to update it and I don't intend to update the OS to do so, much like many others who still have an old browser and using an old OS will not do so. As time goes on that percenatge gets less and less, so the need to avoid using a newer layout method gets less and less.

The trouble with that argument is that we have both heard it all before, back in those bad old days exactly the same reason were given for not using css, as those using netscape 4 could not use it for layouts, and many even argued that html table layouts were much easier to use right up to 2010.

There comes a point that any serious developer must decide for themselves what to use and when, otherwise they risk getting left behind.

[osgood_]

pziecina  wrote

There comes a point that any serious developer must decide for themselves what to use and when, otherwise they risk getting left behind.

Exactly my point which is why I use Flexbox and turn a blind eye to my version of Safari which doesnt support it, although it still makes me feel sightly uncomfortable because I know if I have a browser which doesnt support a method still on my box I'm not going to be the only one.

Once you move to an environment where all your browers support Flexbox it's kind of 'Out of sight out of mind'. All is good

[skylerw87376630]

So your preferred approach is to use flexbox? I am just looking for an industry standard grif layout method. Grid css looked great, but you both said its not ready. I have tried using Bootstrap columns for grids but i am looking for the most ideal way, ir what other devs use

I thought flexbox was a 1d layout vs grid css which is 2d?

[pziecina]

skylerw87376630  wrote

I thought flexbox was a 1d layout vs grid css which is 2d?

That is probably one of the biggest misconception that people against flexbox usage, are telling everyone who will listen, and many Dw 'professionals' are still using it.

Even the w3c who write and control standards for css, say that by nesting css flexbox flow methods, (row and column) flexbox can be used to create 2d layouts, and for 90% of layouts simply using the flex-flow properties 'row wrap' is all that is required.

[skylerw87376630]

So in your opinion, flexbox is the way to go? Is it better than using bootstrap?

[pziecina]

skylerw87376630  wrote

So in your opinion, flexbox is the way to go? Is it better than using bootstrap?

When you consider that bootstrap v4 is going to use flexbox as its default layout method, i think you can see that it is the way forward.

Bootstrap is in my opinion o/k, but overkill for what most sites require, as using flexbox alone along with your own css for anything else, (which bootstrap expects you to do anyway) is much easier and simpler.

[skylerw87376630]

Tha k you so much for all your feedback and help

[osgood_]

skylerw87376630  wrote

So in your opinion, flexbox is the way to go? Is it better than using bootstrap?

Yes, use Flexbox where you can. It's stable to use as a method to produce websites now days.

Bootstrap, you either love it or hate it. If you are happy to use a ton of unnecessary html mark-up, have a myriad of classes scattered about your html, the use of very limited components then  its probably a good fit. However, if like me, you prefer to keep the html as clean as possible, write your own meaningful css classes and don't want to get dragged into the position of settling for what a framework has to offer then its probably not for you.

Of course you can mix and match, use some Bootstrap, use some of your own stying/components but there comes a point where you are reverse engineering so much of the Bootstrap default css that its a pointless workflow..

[skylerw87376630]

Thank you. So you use flexbox for your grid systems?

[osgood_]

skylerw87376630  wrote

Thank you. So you use flexbox for your grid systems?

Yes, I use Flexbox when and whenever I can these days to construct a grid. I no longer position elements by using the css float attribute, apart from the odd ocassion where Flexbox would be overkill to use or maybe would not work.

But most layout methods are still pretty much open to limited use. I'll still use  a simple table if I have tabular data that suits a table, so don't assign anything to the bin because it might come in useful, depending on what situation you are faced with.

[skylerw87376630]

You guys are awesome just the info I was looking for. Thank you both

[pziecina]

A few other points you may be interested in, (and anyone else considering learning and using css grid layouts in the future) and a very good reason one should learn Flexbox before grids.

css grid layouts builds upon the principles of flexbox, and all the properties used by css flexbox to align and space content, or reorder content, (e.g. move the 5th article to the first article position, without re-writting the html) are all from the flexbox specs, plus much of the wording used by both flexbox and grids is easier to understand using flexbox.

Learning how to use flexbox correctly makes learning css grid much easier. Jumping over learning flexbox will i think make understanding and using css grids, much more difficult. As many of the shared features are much easier to play with, and see the results when using Flexbox.

Then of course flexbox provides the ideal and easiest fallback for a css grid layout, plus when used together much more interesting and unique layouts can be built easier.