Highlighted

Feedback concerning Sass series

Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

hello OS

I don't know if you have time ... but if so, I will be interested to get some feedback concerning this Sass series... Understanding and using Sass – Puce et Média  please don't stop at the first two articles which only present certain bases and approaches ...

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Feedback concerning Sass series

Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

hello OS

I don't know if you have time ... but if so, I will be interested to get some feedback concerning this Sass series... Understanding and using Sass – Puce et Média  please don't stop at the first two articles which only present certain bases and approaches ...

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

hello OS

I don't know if you have time ... but if so, I will be interested to get some feedback concerning this Sass series... Understanding and using Sass – Puce et Média  please don't stop at the first two articles which only present certain bases and approaches ...

What kind of feedback do you require?

I can only say its not a workflow that I would want to use simply because of the reasons I've already stated. I don't believe in using workflows where the final output file is dependent on another file which is independent of the final file put to the server.

Yes, it can be viewed as helpful by some web-developers during a build process, while they are in complete control of the files, but they are being short-sighted as anything can happen in the future.

Its like the recent case of KFC in the UK who decided to go to another supplier for their delivery distribution, it all went t*ts up very quickly and KFC immediately came back to its original supplier. If your website files get into other developers hands they can practically do anything with them in a short space of time. If your client then comes back to you your original workflow may no longer be usable, depending on the extent of the changes made whilst away from your guardianship.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

in fact I had posted my comment following your previous remark, I quote ...

"... Less and sass do not improve your css writing. Infact its a lazy approach riddled with a very major fault...."

I think that in the opposite (at least Sass, because I don't use Less), improve, and eeply improve My css writing... and it's not at all a lazy approach... and I don't ound (yet) a major fault in it... so as described in the series... I try to demonstate on what and how it can opens doors...  so that is where I was expecting feedback... again, ... just if you have time....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

in fact I had posted my comment following your previous remark, I quote ...

"... Less and sass do not improve your css writing. Infact its a lazy approach riddled with a very major fault...."

Ok.......... its a short-sighted approach riddled with a very major fault.

I dont really have time to comment on a workflow that I find is a waste of time on a personal level. Once css variables become more widely used and supported then I think we have something major to be 'shouting' about until then pure css it is for me.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

Hi Birnou

I'm not getting into which is best, (straight css vs sass) but I can understand Osgoods argument.

Most people using sass have no requirerment for it, and anyone thinking that it will improve their understanding of css is completely mistaken. Many post in forums often say that they require sass because one can use variables, but if you read about people using frameworks such as bootstrap, they are mostly advised to use cdn versions of the compiled css file, and create their own custom css file. Never touching the variables in the sass file.

Very few of those using bootstrap, ever alter the sass file and write their 'override' css as a standard css file. So why are they using sass?

Then we come to the argument that sass helps when one is collaborating on large projects with others, and that large organisations use it. My question on this is "how does it help"? I ask that because having worked on a large site with others, developers were allowed to use sass, but the file they must submit to the repository had to be standard css, (they could use css variables, calc(), and other css specs).

It's the same to me as the argument for frameworks, use them if you want to, but don't try and convince me that they are a necessity or better than my workflow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

if I understand correctly, for you, the use of Sass comes down to the use of variables ... have I understood correctly ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

again, did I understand well when you think that I'm trying to convince anyone to use sass?

so to avoid any doubt about it ... I'm not trying to convince anyone ... I'm just trying to ask a question ....

so, please, just in case, let me rephrase my original question (to OS, but who can also speak to you) ...

what do you think of the series, which approaches the use of an ITCSS, with an old rela SMACS ... what do you think of the use of an OOCSS approach mainly supported by BEM .... and therefore, .... the flexibility that can bring SASS in this kind of development .. .

please avoid the answers that tell or refer the forum (the question remains on SASS and not on the forum) ... and even less on Bootstrap ... again the question is based on SASS ... Bootstrap is not not sass, even if BS uses Sass ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

I use the Bootstrap source files so that I can create a bespoke version of the dist files. As an added bonus, I can use the Sass language to override the settings used in the Bootstrap files. The amount of code required for the overrides are kept to a minimum compared to the same overrides for the compiled CSS.

The modular approach and higher-level style syntaxes providing advanced CSS features should be reason enough for all serious web developers to adopt the language.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

if I understand correctly, for you, the use of Sass comes down to the use of variables ... have I understood correctly ?

No, you have not understood me correctly. Lets put it this way and maybe you'll understand better:

I DO NOT ADVOCATE THE USE OF SASS OR LESS BECAUSE I THINK IT IS A FLAWED WORKLOW TO USE A FILE WHICH HAS TO COMPLIE ANOTHER FILE, THE FILE WHICH IS ULTIMATELTY THE MOST IMPORTANT FILE IN THE WORKFLOW.

HOPE THAT IS NOW CLEAR!!

Once I can reliably use css variables in the css file that's where I'll be going IF I'm still around......

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

Sorry Birnou, I misunderstood what you were asking and thought it was in reply to Osgood.

I did enjoy reading the series of articles, and think they are helpfull to others. But for me they do not present a balance overview, (let me explain) for the average developer.

Many developers are currently trying to justify themselves as coders, (as in languages that must be compiled). In doing so they are in many cases using techs that make what they produce look complicated, even though those techs are not required for what they are doing.

What is required is a balanced view of when to use assistive techs, (such as sass) and when standard w3c spec techs can be used. At the moment all most people read when it comes to sass, (or less) vs standard css, is very rarely relevant to what they are doing, as they are told that they can do 'xyz' in sass but not css, without given any reason to do, (or when not) 'xyz' in sass, and they are never told when or why they would use 'xyz' in sass, and not standard css, (or given the w3c css property that would do the same).

Hope that makes sense.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

if I understand correctly, for you, the use of Sass comes down to the use of variables ... have I understood correctly ?

No, you have not understood me correctly. Lets put it this way and maybe you'll understand better:

I DO NOT ADVOCATE THE USE OF SASS OR LESS BECAUSE I THINK IT IS A FLAWED WORKLOW TO USE A FILE WHICH HAS TO COMPLIE ANOTHER FILE, THE FILE WHICH IS ULTIMATELTY THE MOST IMPORTANT FILE IN THE WORKFLOW.

HOPE THAT IS NOW CLEAR!!

Once I can reliably use css variables in the css file that's where I'll be going IF I'm still around......

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

I understand part of what you say ... unfortunately not the subtleties that may arise ...

said differently ...

what I find quite interesting when a project is in place and can intervene fairly quickly on this or that aspect of its display, whether it is about the layout, or quite the opposite of its formatting ...


whatever the size of the project, the CSS become (or can become) quickly verbose and 'complex' to maintain, but especially to evolve ...
once the project is in place ... ok, we store and move on


now, it is common that several weeks (or even months) after the customer wishes to intervene again on one or more features that will necessarily have an impact on the visual ... and there ... the modularity, the object approach, the decentralized side, the functions directives, and so on ... that bring Sass allow us (at least me) to quickly take control of the project without having to spend plumbs to reclaim the ins and outs (and I do not mention bower, and other task automators ...)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

screaming does not help to better understand ... arf arf ...

it seems to me once again thinking that you bring back sass to the use of variables and then after the words in capitals (which I do not seize) ... you mention them ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote


whatever the size of the project, the CSS become (or can become) quickly verbose and 'complex' to maintain,

Not really, ever worked on a php file.....a well organised css file compared to that is a walk in the park. Its the lack of organisation by the developer which is at fault, thats down to pure laziness. I've seen dozens and dozens of css files which as you say become complex but that's purely as a result of a poor developer.

I agree with Paula, however you look at it, there are a lot of web-devlopers out their using 'trends' rather than a more realistic simpler approach.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote


whatever the size of the project, the CSS become (or can become) quickly verbose and 'complex' to maintain

Not really, ever worked on a php file.....a well organised css file compared to that is a walk in the park. Its the lack of organisation by the developer which is at fault, thats down to pure laziness. I've seen dozens and dozens of css files which as you say become complex but that's purely as a result of a poor developer.

I agree with Paula, however you look at it, there are a lot of web-devlopers out their using 'trends' rather than a more realistic simpler approach.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

screaming does not help to better understand ... arf arf ...

it seems to me once again thinking that you bring back sass to the use of variables and then after the words in capitals (which I do not seize) ... you mention them ...

OK Well you obviously dont understand or choose not to understand more likely, so well leave it at that as I cant explain any clearer.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

yes... I think that I make the effort to understand your answer,

but

apparently your answer is not about my question ... I'm talking about a series of articles that address ITCSS, OOCSS, BEM, Atomic Design, SMACSS ... and so of the management of these principles through SASS, which in my opinion SASS brings a great flexibility as for their management ...

but I read ... read again ... and read again again your answer... and I do not see in your answer any connection with those principles ... so again, the only connection I see ... is variable ... (no pun intended)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

since the question, or at least the proposal, to break the linearity of CSS, by using SASS, do not touch you ... take as you suggest the metaphor with PHP ...

Developing with PHP today allows us to rely on classes and set up a series of objects that will absorb our needs in interaction and deployment of our applications ...
similarly PHP will enable us to granularize our development by using reusable code fragments that are included or required statically or dynamically,

PHP can relys on multiple libraries to empower some aspects of the needs
PHP will allow us to delegate our calls on promises and thus 'break' this pseudo-linearity of the code ... all this is extremely powerful and allows us to escape from a pseudo-procedural code with ease and to use certain possibilities that the object language offers us ...

So let's go back to the CSS ...

today the CSS do not allow us to work in object mode (where then very difficult and rather verbose) ... today CSS does not allow us to granularize our statements in a clear way and flexible, today CSS does not allow us to fragment and distribute on multiple files the deployment of the rules ... while producing only one and only optimized file in the final ....


hence the series of articles that make it possible to understand CSS in this way by using SASS .... and on which I try to demonstrate the implementation of such concepts (those listed above) ...

and on wich you didn't answer or gave feedback.... perhaps that you didn't red them... and I can understand... time is expensive for each one of us....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

Using a sledgehammer to crack a nut comes to mind......still if it makes you feel better why not complicate procedures.

Not all circumstances require a complex workflow, infact the majority of websites dont yet for some reason which lve yet to work out developers like to complicste simple procedures which involves many more helper files than is strictly necessary, maybe out of sheer ignorance, following the wrong path or just plain bordem.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

so if I understand correctly your answer... adopting a BEM notation and using and ITCSS (or SMACSS) approach to fill up our rules and declarations is like using a sledgehammer ...

am I right ? am I understanding correctly your answer ?....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

I always use a house brick to gain access to my front door rather than the keys, its a bit over the top l know but it gets the job done. Some people like to make simple things difficult.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

it's really impressive the energy you spend on finding junk metaphors that mislead and drown fish ... rather than trying to admit some realities .... arf arf !!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 19, 2018

Copy link to clipboard

Copied

Reality, try it some time you might just surprise yourself.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

you're right, I should go to the obvious and accept some realities. But what do you want, I have always been naive, credulous and almost utopian to always want to believe that the technological novelties, and especially the questioning of our approaches can help us to evolve in our ways of functioning. this is not the case ... and it is true to note that the complexity does not come from learning in itself but from sometimes simply accepting its errors

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
LEGEND ,
Mar 20, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

you're right, I should go to the obvious and accept some realities. But what do you want, I have always been naive, credulous and almost utopian to always want to believe that the technological novelties, and especially the questioning of our approaches can help us to evolve in our ways of functioning. this is not the case ... and it is true to note that the complexity does not come from learning in itself but from sometimes simply accepting its errors

Not sure if you are old enough to remember way back 20 years or so when the internet was shrouded in secrecy by the 'few' who could make things happen. They were desperate to keep it that way as it gave  them more credibility and they could impress and charge clients atronomical prices for something which was actually quite a simple process.

It didnt last and programmes such as DW came along, little Johnny and Suzy, fresh from kindergarten, could now do exactly the same as these frightened web-developers desperately trying to protect their livelihood. Nothing much has changed we now have another set of developers desperate to believe they are offering something which commands huge financial rewards and beyond the reach of little Johnny & Suzy. They speak of Bootstrap, Wordpress, Pug or Jade (I cant keep up with what they call themselves), Sass, Less, Angular, Vue, Grunt, Git....helper files, production files and compiled files.

In reality they are not only STILL trying to fool the client, albeit a different generation, but also themsleves, in most cases. I sit back, smile and watch it unfold.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 1
LEGEND ,
Mar 20, 2018

Copy link to clipboard

Copied

BenPleysier

I'm going to ask if this discussion should be branched to a new one, because it is no longer relevant to the original question?

What is now being discussed, (as far as I am concerned) is if the workflow suggested by Birnou is as it needs to be for the modern developer, or if like Osgood says, developers are in the end producing a css file, so why complicate the process unnecessarily?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Adobe Community Professional ,
Mar 20, 2018

Copy link to clipboard

Copied

Thank you Paula, as you van see, it has been done


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 1
Adobe Community Professional ,
Mar 20, 2018

Copy link to clipboard

Copied

thanks Paula.... thanks Ben...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
LEGEND ,
Mar 20, 2018

Copy link to clipboard

Copied

Now my previous post has touched on a couple of basic points regarding the rwd philosophy, without getting into the subject of srcset etc, (please lets not go there, everyone). I would like to come to feedback on -

http://www.puce-et-media.com/en/deploy-sass-effectively/

Much of what is written, has been around, (even in web development) for a number of years, and is not necessarily related to sass or any other pre/post-processor. What it does relate to is development management ideas and procedures. Most of which are at least used in some part by many developers in the organisation of files and development strategies.

As an example, I think most developers have at some point in their lives as developers heard of and/or worked with the idea of splitting the development into modules, be that css, js, php or whatever, as an example, (using css) one would develop -

layout.css

style.css

type.css

color.css

and not just one css file for everything.

Then either import the file(s) into the master, or link to each file in the head element.

Now to the suggestion Birnou.

I think it would be an idea if you could give reasons why sass would improve the use of the various development  ideas, as an example the ITCSS section, (typical example) describes an idea of organisation that many use without sass, (often without even knowing they are anymore) but does not say if or why the use of sass helps in the organisation of development. Plus how does sass help in the managment of the project when it is possible to apply the solutions in a general sense, and achive the same end result with possibly less problems.

Note - The above comment applys to all the items mentioned in that article.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

I do not think I wrote that sass brought a new approach to object management, or modularization of writing, CSS ... OOCSS, BEM, ITCSS, SMACSS, Atomic Design ... exists outside of Sass

I'm just saying that Sass makes it easy to use and integrate

Concerning the philosophy, and the principle, of ITCSS, it is not only a stack of different CSS sheets splitting tasks, but an inverted pyramid that attributes a strong specificity of overwriting

personally I use a slightly different approach than ITCSS, which I describe later in the series, there is an example of use, and I provide the source files (github) that can be adapted to the needs of each ... do not have not you seen ...?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

Hi Birnou,

I clicked on the link at the bottom of the page, which took me to another series of articles by mistake, (honestly I can read). Which is how I ended up thinking the series on rwd and content was part of the article.

Now for what I mean by the 'how' and 'why'.

When I read 'deploy sass effectively', you list the idea behind each 'organisation' idea, but without any conclussion(s). By that as example lets take OOCSS and ITCSS, the way I read both your and other articles on both subjects, illustrated for me that oocss was in the principles given behind the idea, and the way the idea is presented, aimed more in the direction of programmers working together when it comes to actual use. For ITCSS I found that the idea behind that was aimed more at a project managment idea, in which there is a more clearly defined line between each of the principles behind the idea.

Whilst all can to some extent be used within each other, the article, (for me) would benefit from an indication of the type of use, (and user) each is most suited for, with possibly a couple of sass examples expanding on how sass would be used in each case, say -

oocss being aimed more at programmers would benefit from examples to give an understanding of how oo programming ideas can be used in sass.

with itcss, because this is more suited for those using a more clear delineation of areas, examples of using sass to bring each area of responsibilities code together, (or how it would be used in a modular approach).

Trying to get someone like me who has used sass in the past, then moved to postcss but dropped that also, will always be much more difficult than convincing a new developer. Which is why I say that at the end of each part of the article I am looking for the 'why' I should use sass argument, even if I don't agree with the reasons given I am much more likely to understand 'why' someone is saying "use sass".

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

I understand your concerns about ITCSS particularly ... as I say in the previous message, ITCSS is not only a layered layer of CSS but really relies on an inverted pyramid bringing a stronger specificity to each one. layers that stack on the previous ones;


as I also told you in the previous message, I quote ITCSS but personally I use my own inverted pyramid which I detail further in the series and I provide examples and a github to personalize and ready to use. did you read it ?


finally ... and I see that you still have not understood (given your insistence on the subject) ... I'm not trying to convince anyone to use Sass ...

I'm just giving an orientation of what can be considered with Sass ...


I'm just trying to break the misconceptions (we do not use sass to handle prefixing ... and sass is not an alternative to CSS variables ...) sass is much more than that and relaxed our work CSS writing ... that's just what I was trying to say ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
LEGEND ,
Mar 20, 2018

Copy link to clipboard

Copied

O/K, I know that my following comment will upset a few people, but having read -

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions

The only item that may be usefull and that I cannot find another way of using, be that normal css, linting or other, is the 'if' statement. The question is though, in an age in which IE9 and below is becomming less and less relevant, (not to mention dangerous to use over an open web connection) do I actually require it anymore.

Sorry everyone, but the more I read up on using sass again, the less reasons I find to do so. Five or ten years ago I would have embraced it with open arms publicly, (i did so privately for a couple of years) but now, no thank you.

Edit: If sass is to be promoted now, then I and anyone else who is more than a casual coder or someone following trends, require better reasons than any given, sorry Birnou, but most of the articles give project management reasons, without the 'why', and without investigating other avenues.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Adobe Community Professional ,
Mar 20, 2018

Copy link to clipboard

Copied

You have forgotten to say that CSS variables can only be used as the value part of of an element's property, see CSS Custom Properties for Cascading Variables Module Level 1

How would I go if I wanted to use a variable in a media query like

@media (max-width: var(--mobile-breakpoint)) {

}

There is no reason why CSS variables cannot be used in Sass or LESS. In fact, it is a great addition.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Adobe Community Professional ,
Mar 20, 2018

Copy link to clipboard

Copied

I have found the answer to my question, use Sass combined with CSS variables as in

// For static vars use Sass

$breakpoint-small: 450px;

$breakpoint-med: 900px;

$inverse-background: #222;

$inverse-text: #F0F0F0;

// For dynamically scoped vars use CSS Custom Props

:root {

--container-display: block;

--card-figure-display: none;

--title-font-size: 1.2rem;

--card-background: #F0F0F0;

}

// CSS variables do not work in media query conditions

// this is why we use sass variables

@media screen and (min-width: $breakpoint-small) {

:root {

--card-figure-display: inline-block;

--title-font-size: 1.75rem;

}

}

@media screen and (min-width: $breakpoint-med) {

:root {

--container-display: flex;

--title-font-size: 2rem;

}

}

// Dynamically scoped can include elements

.card-a, .card-c {

--card-background: $inverse-background;

--card-text-color: $inverse-text;

}

// or elements within media queries

@media screen and (min-width: $breakpoint-med) {

.card-c {

// I can force these variables to inherit from the :root

--card-background: inherit;

--card-text-color: inherit;

}

.card-a, .card-d {

--card-background: #222;

--card-text-color: #FAFAFA;

}

}


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

there is a gem really interesting which is breakpoint (as quoted in the article) ... but to go more precisely in the use of MQ ... I also like to add a layer of susy in the toolbox of sass
this will be the subject of the next article http://www.puce-et-media.com/en/working-our-mockup-with-sass-and-susy/ that will use sass breakpoint and susy... the only delay is based that I first write it in french and the localise in US... i.e the sass series is two years old now ... and the RWD ones 3 years old

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

Hi Ben,

The use of a variable, css or sass as part of a media-query was probably not a good example, as it is impossible to say when a layout will start to break without actual testing. So there will be no fixed point at which a media-query is required.

I did work out an if/then/else structure using just css though, but it is writting in the else/if/then order. Using @support and/or media-queries will give such a structure.

The main problem for most developers though is css browser and device support, so even though I do not require sass, I can see that those having to support old outdated, and unsecure browsers, may find sass usefull. As I have said previously though, the decision to use or not should be for the individual to decide, and the development program they use should support both types of user, (which is my argument against Dw now).

Each project has different requirements, so every developer should decide if just css or if sass should be used based on an individual projects requirerment.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

Each project has different requirements, so every developer should decide if just css or if sass should be used based on an individual projects requirement.

+1


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

pziecina  wrote

Hi Ben,

The use of a variable, css or sass as part of a media-query was probably not a good example, as it is impossible to say when a layout will start to break without actual testing. So there will be no fixed point at which a media-query is required.

I just use that very complex procedure 'find and replace', not sure many developers have heard of it though

Example:

Find:

@media screen and (max-width: 768px) {

Change to:

@media screen and (max-width: 850px) {

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

osgood_  wrote

I just use that very complex procedure 'find and replace', not sure many developers have heard of it though

Example:

Find:

@media screen and (max-width: 768px) {

Change to:

@media screen and (max-width: 850px) {

I just use a generic snippet, and insert the value or feature required.

(someone using snippets)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 1
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

pziecina  wrote

I just use a generic snippet, and insert the value or feature required.

(someone using snippets)

I dont know what snippets are......way too advanced for me

Seriously though in the majority of cases no one in this forum is building sites the likes of Twiitter, or Google or Instagram or even a high end car production company, hilarious why anyone would want all the extra managment files, to build a 20 page website, where a few lines of css would be needed, especailly if its a 'template' based site.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 1
pziecina LATEST
LEGEND ,
Mar 21, 2018

Copy link to clipboard

Copied

osgood_  wrote

Seriously though in the majority of cases no one in this forum is building sites the likes of Twiitter, or Google or Instagram or even a high end car production company, hilarious why anyone would want all the extra managment files, to build a 20 page website, where a few lines of css would be needed, especailly if its a 'template' based site.

We could start a discussion on project management?

I've found that those who do build such sites, (and manage the process) use project management tools such as MS Project, and MS Team services. Even Dw's git support can be used, but the drawback with that is that all the files, notes, emails, reports, etc. that are part of a large project DO end up as part of the Dw file structure, (did point this out back in initial pre-release testing, but was told no one is interested. Then they wonder why I left ).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

I understand your reluctance to use Sass ... and the example of the use of the @if... it is certainly reductive ...

the @if does not address a possible use of conditional comments specific to Internet explorer ...

if we remain in the example of the filtering of a file .... and as it is said a little further in the series ... one can filter the import of the file _debug.scss ... according to the context

@if (compass-env () == development) {
 
@import 'debug';
}

but we can also filter in a mixin to modify the value of a property, or a context, or an environment variable (development under ruby) ... in short ... there is no limit of uses

Moreover, the directives are also interesting in the declensions of styles, with maps and @each

simply paste the following instructions into sassmeister.com
$ coul-section-a: rgb (53, 158, 227);
$ coul-section-b: rgb (127, 207, 7);
$ section-a: 'section-a', $ coul-section-a;
$ section-b: 'section-b', $ coul-section-b;
$ SECTIONS: $ section-a, $ section-b;

@each $ i, $ j in $ SECTIONS {
body [data-section-id = "# {$ i}"] {
section {
border: 2px dashed transparentize ($ j, 0.65);
}
}
}

as you can see it is really easy and central to use this mecanism in a web site formating... (just one example among so many)....  i.e the marketing department is blue, the agenda and order are green, the hotline is yellow


(by the way, I prefer the writing of $ maps linearly (it is more readable for me when they become very verbose and nested at will)

and then the functions and directives are not summarized in these previous examples ... there are so many as you can see ....File: SASS_REFERENCE — Documentation by YARD 0.9.12

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2018 0