[Python Flask] flask-assets and SCSS

so if you look into your template yeah you're an excellent template and in the layout we all know this layout is something you extend from right everywhere so every page you go to you will actually load this and then the page content will go into here right so maybe just for your future reference maybe you can see our page content starts here and then page content ends here all right so everything that goes into the content block is whatever you put in your form and order a tiara so here maybe you can put that back and you can put footer okay so what happened is the CSS and Jess alluded from something looks like this okay so before I talk about what how is this working first let's let's look at a normal approach of linking a CSS let's just pretend instead of writing this weird thing here we just say link a CSS file okay so do you know where can you write your CSS files by default in static or how do you guys know about that you guess so if you refer to the flash documentation it does tell you about ecstatic okay so it says by default you will it will always look for your files in the static folder if you if you really dislike the word static you can actually change it when you when you first start the app you can actually change it static files right you can actually change it in my gosh Oh No he says for more information have a look at flash documentation thank you static yeah static folder this one so if you want to change it from static to something else when you in your ab dot pi here is where you can change it you can say static folder is going to be assets for example then now you don't it won't look into static okay so all these things are actually I'm customizable and it's all in the documentation so please don't treat it as a law or a magic that is always like that okay so if you know everything were looking static that means technically in the static folder it is a static folder right I can just create a new file let's say this is my CSS dot CSS okay and then let's say I put my CSS here color is red and here I can just link it to slash no just my CSS or CSS because you were looking to static okay of course Jinja also provided you something like this that you can use which is like that and then the file name is my CSS or CSS if you prefer that I think this is safer because maybe your static folder is moved or something okay I'm not too sure okay so so let's come back to this point what's wrong with this there are many points that's wrong with doing this okay so let's say I have a couple of a couple right in the static I also have this is less a custom bootstrap okay and I also linked it there okay can you can you come out with a type of problem with linking CSS IDs and I've never talked about them but can you try and think overwrite what that's fine the bottom one will read the top line so I can say have control so I change that where are the problems user imagination - yeah one member one problem is cash every time you visit a website but that's it you have deployed this website and the user come to your website the browser will have to make a request for the CSS and the CSS and the CSS is cash in your computer subsequent visit to the same website would not redownload this CSS which means if after someone has visited my website and then I decided to change the body color to blue she will not see that blue unless you change computer and I see go in connectome oh okay this is a very dangerous issue all right so how do you go about that you have to add timestamps so that means each time I change my CSS I will rename this as my change into uni classic version this is now version 2 and then I come here and say this is not version - okay this way if the user we revisit my website the browser will see the CSS style is different the foundings differently will redownload it ok so number one and so we just mentioned this issue we need timestamp for CSS or even js4 names okay Bonhams secondly is it is just CSS right I cannot use a better version of CSS for example a CSS for example says for example less less less is the less is better than CSS okay less is also another way for writing styling but that compiles into CSS so these are all the things we call preprocessor okay so the next thing is about preprocessor okay so there are professors such as out there they are a lot prefer processor for example if you dislike JavaScript in curly braces you can go and learn something called CoffeeScript Coffee scripts you write CoffeeScript it gets compiled into JavaScript so let me show you what CoffeeScript looks like please don't do this I'm just telling you there's no point learning this on the left is CoffeeScript on the right is JavaScript you see how there's it looks like Python now there's no curly braces so it becomes indentation base okay so for water isn't this appear to you you can use this but don't show it to me okay so let's say you want to use P for vessels at that and you want to use SPSS that gets compiled into CSS okay so the trackers want to just you want to use P processors that doesn't mean that you can just say hey let me use CoffeeScript so I will just link script SRC to my script dot coffee because the exception is coffee do you think the browser understand CoffeeScript no so you still have to find a way to compile this into Jess and you don't want to do it manually each time you write some coffee script then you have a ragging some comments get the Jess copy and paste into the dress right so you you need that if you need that kind of pre-processing then you also you also cannot use this kind of approach for this approach for linking and assets okay what else sir we can use three processors such as okay and none and thirdly is minification post-processing we can do post processing what can't post processing you need for your CSS I just said it minification of code right you want to minify the CSS or dress codes why because you do not want your your users to download others extra extra yeah right extra bite-size the empty spaces and extract new lines your comments right computer doesn't need to care about those so you need minification you also maybe want some vendor prefix remember when when the prefix in your CSS so for example if you are using if you are using the animation you have to do most animation for Mozilla then you have to do you know all these vendor prefix four different four different browser so sometimes you can just use some sort of library will help you are automatically at vendor CSS vendor prefix okay so that should be enough reasons of why this kind of linking of assets is not sufficient right okay so how do we go about solving that so almost all web framework will come with some some sort of asset pipeline okay as in a pipeline where all the assets will go in and then come out differently okay so in this case we are going to use something of class assets it is already pre-installed in your in your this template if you check a requirement or text you already see flash assets okay so how does fast assets work obviously I will just say read the dots but since both of you most of you wouldn't our quickly give you some explanation so it allows you to use this thing called bundle where it will bundle all these files together and then you can apply a filter so this filter is where the post-processing of pre-processing comes in okay and then it will output into this bow quite safe all right so Jasmine is a filter that will minify the JavaScript code okay so if you look into your if you saw I will remove this okay so now we know this doesn't work so if you look into your current layout it is linked like that so what it means is that it will look for the bundle prepared by Flash assets that is being called home underscore CSS or so - gorgeous and because this is something that we consider as a utility so we actually Troy under the folder called YouTube and then inside the utility there is a s SWI okay if you do not know where to look for it just command P or control P type assets or py and you should look at you should be looking at this one so this whole bundle then become a dictionary and we actually import this into the [Music] we should put under anywhere into the in it okay so obviously you can just expect this to get put into the app automatically so the bundle that we created was then register like this okay and then you also need this environment and throw that in okay so technically all the lines are this I'll put it here okay so using flash assets number one create bundle okay using the bundle function and then secondly you have to create this access using the environment also come from the flash assets library and episode app write your effect and then you register so these are all the three things you need to do and it has already been done for you by for interested this is what it has done so now how do we use it so if you look into it home GS and home CSS had already bundled lots of stops has any of you going input bootstrap will get the of you going install bootstrap again you actually do not write have you know this bootstrap has already been installed for you how do you know how do you figure that out in the first place in the readme oh nice see documentation that's why it's so important in the readme is one or maybe when you are writing others bootstrap classes you also notice the order CSS in an inspector alright so this is the reason because by default we already put in CSS and the CSS for the vendor folder and then bootstrap which is here let me just close everything close close close close close okay so I'm done here CSS panda that's already dispersed rep CSS so we already download the source code of bootstrap and this is already minified for you and also bootstrap booster required JavaScript everything is here okay so you understand why you have all these things because let's just talk about you as far the choice is simple all this JavaScript bundled together go to a filter called jasmine I'll put where thank you where's Jan /home here do you also notice in your git ignore you ignored Jen okay this is something we do not need to make it push on to the github this is something that when you put deploy the code it will immediately compound and generate for you okay so we do not need to push this but rather flash and set doing whenever you do flash run okay when you do class run flash and sets will look through this house if there's any changes it will regenerate a new gender and so what you need to link is actually this chest and in order to make you easily link this without changing the version number each time that's why you come out with this one so that's how you link it like that it's a okay so this sa URL here refers to this Jen's lash home with a person okay so remember the version this is what the time stand is for so let me show you so if in my custom so right now in my right eye there's a custom dress where it's being bundled into it if I go to a custom dress there's nothing in there right so if I check my inspector you will notice that it is linking thus the Oscar is jet Jen home dot this is the time stamp this is a version number okay so if I just refresh it is there the six for e the b1 ad right imagine change i refresh again it is always linking that same thing but the moment I add something into my cousin Jess let's say a lot you sleeping okay and I come here i refresh notice how the version numbers change okay so this is also another important point the version number only changes if you change any of the files that is being listed here okay cool so just price so if you want to add a new files all you have to do is let's say if I want to have a new J's file here the Akron maybe this yes ha is for handling the follow which the following okay so I quite follow donc je s and so this is I consoled a lot of some stuff here okay no follow logic in Jess so all I have to do is put it here je s / because it's under the static J's folder right so J s / follow Dodgers and this one will get compound as well okay so if I now refresh you'll notice that it would take slightly longer time if you have a lot of CSS and this is in okay okay so what does the J's mean filter - so if you look into flash assets filter which is here filter they actually gives you a bunch of filter that you can use built-in filters okay you can even buy your own filters so these are all the built-in filters that is included in Jasmine everything on the left okay so what we are using here is we just want a JavaScript compressor so if you click here it says you can use rjs min ue j s closure j s and this is what we are using so how so if you want to use this you need to make sure you pick installed you asked me so this is also where if we check your requirement text we already preinstalled us mean for you okay so it's not magically done by the class SSO plus s I still need to use the party filter to apply yourselves okay so if for whatever reason you want CoffeeScript right so then you can pip install CoffeeScript and then you change this and then you change this filter to CoffeeScript and now all these things you write your coffee okay you probably need multiple bangles for them yeah okay I'm sure you can do it I've never done it also what a play okay so Josh gets simple now let's talk about SCSS okay so this by default it only gives you CSS mean which is just minify CSS and that is super lame okay as as a full stack developer you cannot call yourself a full stack developer if you do not know what it says CSS okay so s CSS has a very nice name is caught I don't know super CSS syntactically awesome style sheets it's cost as si ss SS comes with two - syntax that you can use SPSS syntax or SAS s syntax the SPSS syntax is with the curly braces the SI SS syntax is with indentation okay [Music] okay right so on the right side is what you have right this indentation is wrong man oh no is what you have been writing just normal CSS or left all right the the left and the middle and it's what you can pick I would I always use a CSS because I'm more used to more use of the curly braces also notice that SPSS is completely backward compatible of CSS so even if you use a CSS file but you write normal CSS in it was they understand okay so in SPSS then you gain things like variable right you can be fine variables and then pass it down okay this is something I feel like super important for color okay and more important things you can nest so instead of writing a and then a:hover you can write a and inside the you say and hover okay so this will be chin together okay so mmm yeah that's in stock component so if you google a CSS to CSS you can actually start I will show some difference okay so for example I can say primary color is okay and then let's say in the I have a pitch that is a login page I read the whole login page in this strip and inside the div I have h1 I can I don't have to give the h1 the class anymore you see that because this hitch one will not accidentally get selected by it I would not accidentally select other h1 because there's only one login page okay so if let's have a h1 I can say the hitch one color is primary I can also say let's say there's some P dot subtitle subtitle the font size is 0.9 year right if you see this is the CSS visa okay it doesn't look like much when it's like that but imagine that you have a lot of things like login page has some heading 10 pixel and then and then you have to repeat okay so let's say in the subtitle then there is a when I have on a subtitle I will transform maybe skill by 1.1 okay see CSS looks like it's easier to read now you turn right that you can't write that it's a lot of repetition it's not easy to read guys this is a simple CSS so you'll feel is easy to read if I have so many things inside login page then you're just going to and when you are writing CSS trust me you wouldn't read like that you will be at the selected wanna write or then you'll be our h1 cannot hitch one is duplicate I mean it was like a Tahitian I don't know I don't want and you will start ending more and more classes the problem if that is you have so many class names on all your HTML you do know what to start adding class for every deep I know that's what you are doing right now I need to select this header let me quit 800 but no title is taken this is a title only for login page let me call it login page title makes sense tell that to the next year next year when you look back to your code you'll be like no why did I do that because why do you make it a necessary complicated by doing this I do not even have to give the h1 any class or any IP it's easier to write ok sorry ses it has a lot you can also do function ok correct so let's say you always need to repeat this what that's what's that what's that thing we always repeat this reflex yeh Flaxman flexor muscle ok items Center okay you always write this right and you're so sick of repeating this here and here and maybe right everywhere ok that's going to repeat this to place or maybe that's another deep here there's a some section dot pics so what do you do is in scss dots again it's all about documentation guys these are the things that you can do so what we are looking for is my goodness mixing yeah we're looking for mixing actual pitch here at rules are a truce okay there's something called mixing so what mixing that is if you set function color it's at least a mixing chorus at least next time you can just include it anywhere else so include and mixing so I can do it this is something that I always do which is these three lines right so this real nice so I just have to cut it out and I create a mixing taught what do you call this Flex Center right okay and now you just do that and then you pass in there and now you just have to do include black Center so here you just include black Center include flex Center nice is the CSS the easier to read excuse me all right so what if you want to pass in front of parameters you can even do that you can even pass in parameters then that's where you use something called a a function I think it's your function you can even write function okay you can even do loop okay again that that may be slightly overkill but function sometimes is helpful for me because I always need to apply box-shadow to a lot of things and then I will write a fan but sometimes the boxer dog color or the size is slightly different so I write a function that has everything but I can pass in a value to slightly change the size of my boxer dog okay it's up to you however you want to use it but I think mixing include and variable are super nice nesting is super nice the rest up to you okay greet the dots it's quite nice okay interpolation yeah Oh actually mixing can also call well look at this this is crazy even the class name can be generated dynamically from from that okay so alright so now enough of that how do you use it in your flask okay so in order to use it first we have to look into the filter again so remember just now the flash assets the flash suit the flash assets comes in with many filters right so we are looking for CSS compressor so CSS means what does it do if you just read all the dots it will tell you it's just minifying minifying cleaning swimming up up up up up top but if you want to use less you use this less filter so I will just save you time and ask you to use this flip says super nice so if you recently obsessed what lip says does is it will let you use as a SS okay and then it has like whatever is support in the scss okay so it will let you use SAS MSDSs a CSS up to you so how do you use it first okay so this is something that's not in your current put okay what you do is first we come here we make sure we are in the right environment okay I'm going to keep in stock lips s I am going to Pitt please I'm going to class run no no need first let me come back here okay then you peep into something without a TX ela you do this I just create a new file call requirements without txt and it's in there okay so what are we going to do here is like I said s s CSS is backward compatible so even if you give me CSS it's fine okay but from now on I'm not going to have one lame CSS there just put everything in this is my recommendation I hope you guys can consider what I want is I will have a main dot a CSS that's all this bindle a CSS is going to import everything because s CSS you can important okay so what I do is in the in in the CSS folder okay I call this main dot as CSS okay you can call whatever you want as a matter so in this manner I CSS this means I CSS I'm not going to put any code in there okay I'll make it empty why one here is an to start importing so you can have partial as CSS so if in here I start creating files car I always be a place okay I'll make use underscore to differentiate this is a facial I will also need a variables okay and what I will do next is for each pitch I have I also create a file so for example this is for home home page this is for login page oh I call it just off because let's have to find to combine login sign up together so maybe I call it off pitch maybe okay so now I have all this what I do is in my in my main in my main I'm just going to import so how do you import you use Elias import and the does the sequence method I will always look my variables first okay you don't have to write the name anymore so I will do this so I imported then I will import base okay then I'll import homepage that import off page okay so while I this now what I can do is in my variable I'm going to start putting all the name I'm in color I work for example primary color is I like let's say 0 BC this is my favorite color so I will then have light maybe like one like to okay or prime me like one like two and then you can also use butene functions such as light that lighten this by five percent lighter than this by ten percent that these are all SPSS functions then you will the bottom one all right the top and also look at a specificity score but in the variables I will try I don't really actually in the variable sum I only have like mixing you know box-shadow so like the one we love so much black Sentra I'll put it here and then I'll put this here okay Oh oh yeah all right you absolutely that's what I intended yeah okay like that yeah you're right so if you install the SCSS in here they were also recognized vs Co recognize this is that okay so text me again you know black text and white background is really ugly I hope you notice that so if your background is white your text should be like that gray itself black so it looks very old-school when you do black and white like that so you can have like text like that or maybe border or your border color you know all your border colors should be also unified you know something like that maybe I have some function loading shadow bottom and then you do some boxes or code okay alright so now I have all this and now it can be used by other CSS underneath okay base right also this is something a lot of people do not do is they use this my recommendations is all font size you see em but you have only one place where you stick so in the HTML itself let me show you if in the base in the base I said HTML font size is 16 pixels now every time I do a mm is just the multiplier of the parent and a parent a parent so let's say one day you know this Hema and how website the text is slightly too small or too big you just have to change one pixel here and it saves you a lot of time seriously I have so many times where we have to change the entire size of the and her page and you have so many pixel and PT to fix you know it's horrible but if you just base everything on a.m. then you can just change on picture like if you ever have something I think that's what put struck the margin utility sees doing something other not too sure I I get what you mean I've never implemented something like that by the space I usually just had yeah okay I'll look into that me I'm quite curious about it so so maybe base is where I have liked for you know some some of the utility class because it's a utility class so I'm allowed to use important because I just want to apply it anywhere any and any of anytime I want okay and then the rest so this is the base this is variables and then maybe in my in my main is just importing okay and then I say this is my off page I will make sure my off page holding is wrapped in the in the deep in the ID and then I will start making all my stats here together okay cool so by doing this it should work except you need to do one extracting okay so this is this one took me a long time this is a flash as setting so like I said if you see flash assets only knows that it needs to recompile the bundle if the files in here changes okay so which means only if mendel a CSS change then you will be able to recovery import all these files but we are not changing Mendel as CSS anymore because it's always they sometimes we might add extra but most of the time you don't touch this you are touching maybe you're touching the earth pitch SCSS that you're touching here so this would would not detect we can make a test okay so like right now oh sorry one more thing so this thing needs to change your lips s okay do I need to change this this is output right output has to be CSS browser needs to understand CSS we are the what the filter the filter is just look into the package remember we just installed it freeze so okay so now if I do trust run I used to be pink though okay so see my color my text color is actually great right hey where is it wait wait is it being applied I don't even know I think I put it in the body ah yeah hey this one tree a tree a tree I I don't know why you got okay so anyway if I look into the this one nine six a seven right oh sorry this one fb3 6d c 2f f b 2f so if I were to change something in my last off page I just say Kayla that's it in my face I say in my face CSC SS I say off on sizing to start it in pixel i refresh it doesn't change right if you look at the you still FB 360 C to F is there this one so what do I do I need to use something called depends or depend this is the last thing then we are done depends okay define addition additional set of files which are consider when when determining whether reviews required okay so we need to depends so why we can do is here we're at one more thing called depends and what do you want to depends on basically we want to depend on everything that is in CSS slash anything thought as CSS so that if I change anything in the CSS soda to the fashion and reverse CSS it would be compound previously it doesn't you only look into these 2008 and this 2008 was changing okay so now if i refresh I see that hit now it's different right it's five one five six nine so if I go and change this to whatever eighty pixel 89 pixel i refresh it will change and this one is three five six okay cool that's all about assets okay any questions again you might find this optional we are it depends on how much fun and you want to dedicate to if you are like I don't care I just want some color it's okay up to you alright I have to tell you this anyway because I'm sure there are some finally will pursue okay cool so jinglun is going to talk about aw that's very soon so that you guys can work on something during the holiday when you guys won the AWS break up five minutes for 4 p.m. is 3:48 4:00 p.m. okay all right so you guys just absorb all these and then we will have videos and then throughout the long holiday you guys can at least work on the rest if you want to okay go

Channel: Liren Yeo

Views: 1,494

Keywords: python, flask, scss, tutorial, flask-assets

Id: yV127dD0kJs

Length: 41min 29sec (2489 seconds)

Published: Thu Jan 23 2020