 Okay, so I am Akhan, I work with old software and I am a designer who loves to code, so I do a little of both on a daily basis. So today I am basically talking about responsive design. Before I get started, a quick show of fans, designers, programmers and how many of you do both? Okay, so today I am going to be talking a little bit about responsive design. See, responsive design and different designers use this. They use different patterns, different designs. Each designer has his own way of doing things. So, while doing responsive designs, there are certain patterns that emerge among all the different designs. So I am going to talk about a few options that you have. You are creating a responsive design, what are the options that you have? Or what are some ideas that you can use? Okay, so let's get started. So here is one concept, the matter of the site itself. This is mostly fluid site. That is you have one layout for the large screens and one layout for small screens. At the beginning it starts with multiple columns for large screens and as it grows narrower, at a specific point, it all shifts into a single column. So basically you have two layouts. The second pattern is called column layout. So basically here, as the screen size changes, as it becomes narrower, columns are dropped. So you start with, in this you have three columns and as it grows narrower, one column is dropped and all the content fits within two columns. As it grows narrower, now suddenly all of it is re-chuffled into a single column. Here is another technique called layout shifter. This is a lot more complex. In this specific technique, you don't just drop columns and just shift things to a narrow layout but you actually move stuff around. So in this column if you look, see you have the logo there, you have the menu there and you have a couple columns part of the main content area. In this layout, the menu shifts up. All this stuff that was part of this column is shifted into that column. So this is a simple version of this. Here is a much more complex example. You have a menu at the top, you have the logo there and here the logo is moved to the side. You have the menu right beside it. In the larger layout, the logo and the menu moves into a sidebar. And it's not just the logo. You look at the caption. In each layout, the pattern, the location is different. So this pattern is not very common mainly because it's quite difficult. You are basically creating not just one layout but three more different layouts, each layout but with the same HTML. So it takes quite a lot of effort but sometimes you might want to just go the extra mile to get a really special design. So here basically this is called off canvas. You have content with this hidden off canvas. So let's say in this example you click on more and all of the content that is to the page slides down and some information or some content that was done above the page is displayed. The same pattern used in a different way. In the mobile, you click on the menu and the menu slides in from the left side. So basically these are just a few of the patterns that you can use. There are even several other patterns which might not fit into these simple patterns. But basically when you are doing the design and creating a responsible design, it just doesn't have to be a simple thing where you move from multiple patterns to single patterns. You have a lot more options. As a designer, you can be a lot more creative if you try. There are lots of examples. So just look at, just try to do something new, something different. Responsive navigation. This is something I wanted to talk about because on a lot of responsive sites, this is handled really, really badly. What do I mean by being handled? This is a site that looks really beautiful on the left side. But here on the mobile, the entire screen is taken up by the header and there is hardly any space even for the menu over there. We have two pages. I have put two pages here. This is the home page. That's the location page. Can you use what any difference between these two pages? So if you bend to this page of that page, you won't know which way you are going. You have to scroll all the way to the other. You have to scroll several speeds down before you see any difference. Here's another one. This is slightly better. At least the menu is visible. And if you see, this is the home page. So you have an arrow pointing down here. And this is the vlog. You have an arrow pointing down there. But that is really subtle. Generally, if you click on the blog and that page loads, you won't even realize that you are on a different page. Finally, you have no actual content. And based on the way the layout works, you won't even realize that you have to scroll down that there is some content below the board. Here's an example that's slightly better. At least you know which page you are on. Here you are on the home page and there you are on the about page. Fine, but what about the content? No content is visible. Actually, if you clicked on about over here and that page loaded, you would just think that that's just selected to pay the link. You won't even realize that it's gone to a different page. It's a bad example. These are all bad examples. So then you can create an example. But there are a number of options that you can try based on your requirements. Here's a really simple example. Keep the header small and keep the list of links in a single or two lines. Make sure that the links are not too close together so that while trying to click work, you don't click on a different page. But otherwise, if you look at these two examples, these two pages, it clearly shows which page you are on over here as well as shows, gives you the title there and a lot of the content is visible. At a single glance, you can tell which page you are on. Here the entire menu is a single button and then you have the content visible below that. If you want to go to a different page and you want to access the menu, you click on the menu and the rest of the links for the menu are displayed there. You click on one of those, let's say you click on services, you are taken to the services page where again you have plenty of content visible. So at a glance, you can tell, you can easily see what page you are on and this method you can have a lot more links compared to the previous technique. The previous technique, it would work for four to six links. This one you can have six or eight more links while at the same time the menu doesn't take up the whole thing. Here's a more complex example of the same previous technique. You basically have those buttons at the top, they have either a menu or a pop-up. So you click on sports over there and you get the menu with all the list of sports. You click on NPL, you get a page specific to that, you get that content, it clearly shows you that you are on a different page, you have plenty of content visible. Or you click on My ESPN and it shows you the login page over there. So this site is a much more complex site and it has lots of links. But because they have designed it properly, they have designed it carefully, the links don't take up the entire page. You can actually see the content and if you want to go to a different page, you want to access the menu. You are available accessible whenever you need to. In this example, the menu is in the footer and in the header at the top, you have a link. If you click on that, it scrolls to the bottom. So if you are at the top of the page, you want to access the menu, you click on the list or if you are reading an article on a blog, you read the article and you read the portal. And you have all the navigation links that you can see right here. So this works quite well for stuff like blogs. So basically here I've shown you about four patterns, different patterns that you can use for navigation. The main thing is, when you are creating a responsive design, don't just design it on the desktop and then make it narrow or empty on the desktop. This is what the mobile page is going to look like. On the mobile screen, the height is a lot less. Take out a mobile phone. Please take a look at what your site looks like. And think about if a person, by looking at the page, is it possible to buy looking at the top of the page? Is it possible for the user to know which page he is on? Or is the menu so important that no content is used? Just one of the main things is don't make, the user should not have to work to figure out what your site looks like. Don't confuse the user. Okay, next. So responsive images. You, let's say you have created a responsive layout. And for different sizes, you create different images. Let's say you have a logo which is a large logo for desktops, something smaller, and then something smaller for mobiles. And then you write out in your phone. For some reason, even though you have created a small image for the mobile, the entire page goes really, really slow. Why does that happen? I mean you have to use a small image which should go far. Let's take a look at how you generally write the CSS. So you have the header with a background image, with a large image for the logo, for the large screens. Then you have a media query saying for smaller screens, let's say a tablet, you use a medium size image. And if you're going even smaller for mobile phones, use a small size image. So this should work, right? A mobile phone should download this image and it should ignore these two. Right or wrong? Yeah, so here's what actually the mobile browser is going to do. It's going to look at the top declaration. Now this applies to all devices. It applies to the desktop but it also applies to the mobile. So it is going to download that large image first. Next, it's going to go look at this declaration. This applies to all screens less than 800. So what's it going to do? The mobile is less than 800 pixels wide. So it's going to download the second image. Then it's going to go to the third image. Look at that and see, okay, this is for mobile, but mobile is less than 480 pixels. It's going to download the third image. It's going to discard the first two. It's going to use the third. But basically, I'm going to move my browser, download three to four times the amount of data that it really needs to know. Right? Yeah. Okay, the question is, does CSS read fast or shouldn't it stop downloading this and start downloading this later? No. Once it starts downloading that, it continues downloading that even though it is using this, it still downloads that in the past. And it will probably finish downloading this first, then this, and then it will start downloading the final one based on the bandwidth on the level. Okay, so then what solution do you have? Basically. Make sure that all the images are inside media query specific for a specific build. Meaning you have a media query here which says minimum bits of 800 pixels. So any screen that is greater than 800 pixels will download that. So let's see what mobile browser is doing. It's going to look at the first declaration. Now, this is for screens wider than 800 pixels. Since the mobile device is about 300 pixels, right? It's obviously going to be for the first declaration. Then it looks at the second one. This one says a minimum bit of 480 and a maximum of 800. This part is important because otherwise it would apply to mobile devices. Here this will apply only to devices between 480 and 800. Okay. So since the mobile, let's say our device is less than 320 pixels, it's going to upload this. Then it's going to the final one. Since this applies to all screens 480 and below, it is going to download the third one. This way, this is the right way to do it. So go with mobile first. Yeah. So what he said is one thing that I have talked about lately, this is the mobile first. So put the minimum bits, the narrow bits at the top and the wide bits at the bottom. So later if you want to add anything. So this technique will work for images that are part of the layout. A part of the content. Let's say like a blog or a news article. You have photos and images part of the content. And use a media query to do that. Right? So then what do you do? Most browsers don't wait. There is no one technique to use for this. The browser is not going to help you here. Basically the easiest way to do it would be to have something on the server side. Just this for the user agent checks the screen width and gives the browser the image according to the device. So there is no one solution you could defend based on what framework or language that you are using. Basically two options. One thing, when the device is downloading the image, take a look at the device. And basically it is a link to the images replacing the links based on whether it should be a small or large link. Or the second option is just give the same estimate for all devices. And when the device is actually downloading the image, the PHP or the script that we have on the server would detect it and give the server image according to that. Basically it is no easy solution for this. No CSS based solution that I can give you. You have to do it on the server based on what framework and language you are using. So you have the images based on your view size and you have an image that is part of the content. And as the screen grows narrow, you have images that do not fit within the content because the image is wider than the object. So you have to do some very simple options. The first option, image, give it a match width of 100%. So then the image, the maximum width, the width will always be within the container. If the container is 400 pixels, it will be 400 pixels. If it is 300, it will be 300. If it grows bigger, then the image will stay in its normal size. So that is one option. This option will not work just only for images. It will also work for videos. It will also work for slides and video. The second option, container over for video. This option is, if you do not want the image to be reset, you want the image to stay the same size, but you do not want it to play over this content. If you do this, then just this part will be visible within the container. Everything else will be cut off, but your layout will still look fine. But this layout, this method is probably not going to work for embedded objects like flash. But you can test it out, depends on the process. If the image is only this narrow, then it will stay at that size. If the image is narrower than this container, it will stay at that size. The max width will only apply when the container is smaller than the image. That is the reason that I use max width and not just play width. If you just use width, the image will fit no matter how large the screen is and you might not want the image to stay large. On a desktop, you might just have it coated to the left side. The image will be bigger than the screen. It will be bigger than the screen. It will be larger than the screen. So, that you would have to test it out. Because if you are using in the CSS, then you would have to check it based on the browser if it overrides correctly or not. It is all right. The image will be bigger than the screen. So, you will put max width under first part. It will increase the screen. But the image will stay like this. So, here is the thing. In general, if you are using this technique, you either do not declare the height anywhere or it is in this place set height to auto. If you are having a problem where the width is being adjusted but the height is not being adjusted, set the height to auto and it will go properly. Any questions so far? Now, when we are designing for new devices, designing for mobile devices, designing for tablets, screen size is smaller but the input device itself is smaller. You do not have a very precise mouse that can fit a small target. You are dealing with figures. So, basically, you cannot just use the same UI that you are using for large things and make it fit in the small space. And generally, when you are using your phone, you are most likely not touching your finger or most likely using the thumb, which is even less accurate. So, when you are designing for the UI, make sure that your blinks, your buttons, anything that is suitable, big button. You can have blinks but keeping up margin and time between different things. This is enough space and it should be fine. That's one thing. Second, many of you probably, many of us are used to having over menus. So, basically, the drop-over menus or you can actually have a pop-up on a hover, make sure that in addition to them, or based on the screen size, you can attack and maybe figure out what that works for. So, to use that, there are also avenues as well and small computers. So, you have certain drawbacks for touch screens, certain things that you need to be careful about, but you also have the game model. There are new user interactions that you can use. Now, you have applications on the iPhone and on Android that you've just chosen. Some of these are truly becoming available to your web apps as well. So, you have stuff like full-to-field items. You have swine, you have space to do stuff like that. So, some of these are possible to use in the web browser, but be careful as you use them. Experiment with them, but be careful because not all browsers use them. So, don't use a gesture as the only way to do something. Also, gestures are not going to be easy to figure out most of the time. It's like a shortcut on the computer. The shortcut could be the only way to do something. That's if you make your own. In the same way, a gesture should not be the only way to access a certain feature in your device. And if you are using gestures, make sure you test them properly in the device itself and not just in one device and work in a number of different devices that you are supporting. And if you have a gesture, make sure that you spend a lot of time implementing it, testing it and everything else, you know, I get anything there. When you're working on responsive designs, the recommended way to do it right is to start analyzing the mobile layout. What is the mobile layout? Why not in the desktop? You want to figure out what's on the last screen and then do the same level of modeling. But here's the thing. When you're designing for the mobile, we have a small screen, we have limited space. And this is going to force you to basically focus on what you actually need. You might want a bunch of features which are not really necessary. Or you think you might be used to but you're just going there. But when you're working on the mobile device, you have to focus on what is going to fit. So you have to think about what is going to fit and you can design according to that. Basically, it is for everything that is going to fit. Let's take a look at one example. Here's the flipper boom page. You go through all the venues on the boom page and you have to look at some strategies. You want to find something about it. Basically, it has to be cut out. Here's the mobile flipper boom page. And most likely, it is going to be created by the same team by the same team. But that page is completely cluttered. This page, it's mainly called the best internal number. The point is that there are basically a bunch of things. So you want to upload a picture. You want to see what is the reason for this. You can upload it. This is a link item. And creating, starting your mobile phone doesn't mean that you study quarter-stages. It just means that you think about what is important and create half of the data that you see on there. Secondly, not every feature needs to be on the boom page. Think about how you are laying out your workflow of your site. Is that clear? Think about how you are working. So this was there on XK series. So here's the things that are there on your university page. So they have the name of the school. They have the promotion. They have the campus photo. They have the alumni. They press release. Now, if you are going to a college or if you're coming here to this place to find a place, you're not really interested in any of these items. What you might be interested in is the address of the place or an application form or contact number. So think about what your view is your site like this, which is what you want to put, or is it like this, that these are the things that the user is actually looking for in your site. Anyway, these two books, I would recommend that you buy them right away if you don't already own them. I can only cover a few things today in the talk, but these go a lot more in depth and if you already have them, you should already own these books. If you don't own these books, go home to night and buy them. These two books are available as an eco-comment for $50. If you're a designer who is earning even a little bit of money, you can easily afford them. Okay? All right. So, all this is fine. We are working with, we are creating new sites, 3D printing, everything, how everything works. But what about sites that are already existing? What do I do about that? So, I have a site that is a fixed width that has a money... Well, simple solution, but not simple. The correct solution would be to create a site css, they really depend on how you are doing it and creating a non-strat with the response of them. Or, a lot of the css, keep the most of the css, not in the functionality, but quite a bit of the layout css, so that it is respondent. But both these options take a lot of time, take a lot of effort. In the real world, when you are dealing with clients or with limited time and limited projects, generally these two options are just not in. So, what do you do? Third option could be just taking a small step towards the response of them. Meaning, you keep the fixed width design as it is, for the lalasites, and add another css site shape just for mobile devices that overlides the desktop version. So, it takes the desktop version and inside, as the state size decreases, for mobile devices, either hide or decrease the size of the columns in a specific way just for mobile devices. Now, this is not ideal. It's not going to make your site size much faster than mobile devices. But if you don't have an option, at least you can take a small step towards the response of them. Any questions so far? Yeah. The quicker example you gave was the service side. This was the home page, if you are logged in. Yeah. That was not a response to design. That was to separate desktop and mobile devices. Just explain, see basically what happened quicker is they had such a complex side. They started with the desktop version. So, they had such a complex side that they just couldn't fit it on the mobile screen. They had to redo the start home steps. So, instead it starts with the mobile device. It is easy to add additional columns, add additional designs and source of designs, size and effects. For a lalasite, it is something simple. Taking something complex and making it simple is difficult. Taking something difficult and have it add stuff to it is a lot easier. So, start with something that is simple. Start with the mobile first. Then as necessary you start working on the large screens. Any other questions? Responsibly it is like more releasing ceases in the other screen. Yes. How much of a storage? How much of a storage? Okay, basically on the whole it is possible to write it is possible to write a responsive user that works across almost all devices using media tools. So, then as much as possible media tools is going different in JavaScript. I will give you a link to a JavaScript file which will help you to help you to create a responsive user that also works. Please, we have to take a look at the presentation part. Part of the interaction is like thinking about that that is out of the scope I don't have time to cover all of that today. But you can do research and see what you need to do. Basically, it is a for mobile devices person. You need to be careful about what JavaScript you use. You can't, don't include so many JavaScript labels, 200 of them are created so the percentage should be used for some days. Okay, let's create a simple responsive design layout and let's see how it works and then we will go add a few more complex words as well. So, let's quickly create one thing a responsive design, you won't have a consistent design you need to have a grid and it should be a flexible grid. So, we started this week let's say we are taking example of 12 columns making each column 5ms each margin 1m which is 7.3 This is an example and here is a layout that we are going to create 3 versions, desktop, tablet and mobile So, here is what is that 6 links, 3 articles We basically have a section page you have the navigation with the links and you have the news with the list of articles So, as we started always the section page you have a margin you have auto-saturate the width is 73ms which is the total of all the columns and the margins and we are applying a maximum of 100% Why? See this line basically it shows that this page is never horizontally wider than this So, as the screen size improves narrow the page will also go narrow to fit within that Second, all all widths should be in percentage Why? Because we as the entire page becomes narrow we won't need widths of the individual elements also to change proportionally to the rest of the page So, if you use n's or you use 6's do everything in percentage So, here is the how did you get this 5ms each and a margin of 1m, so that is total of 11ms So, divide 11 by 73 and you get that 50.066 So, insert that, now don't round it round it up or down because if you do that you will have the layout where one thing says to work and the other thing to no round it at least put it down to at least 3 points 3 digits after the point and the margin right 1m by 73 you get that, 1.3 Same thing you do with the articles the articles are 23ms wide that is the width 31.507 and the marking is the same the total width of the page is 73 and the width of this article is 1, 2, 3, 4 columns are 5, 4, 20 plus 1, 2 and 3 margins 23 So, you take 23 and divide it by 73 you get 31.507 Yes, I have uploaded it I will give you the next So, we have seen the layout for the last page is completed Next is the layout for the tabular version So, we add a media screen and it is a match of 800 pixels and say ok navigation the link now it spans 4 columns in this version right, because the page is going narrow with the link here was way too columns the links would be too way too narrow So, we need to have it span more columns So, basically you calculate that 23 by 73 you will get this 31.507 and here the article is spanning 6 columns you calculate that you get 47.9 4, 5% So, lots of calculations, lots of numbers And same thing for the layout match with 600 pixels each link spans 6 columns and each article spans the entire page minus the page margins at the side ok, so we have done this side we have a simple layout it goes on all devices and you are really proud about this the first time you have done it you go into the client what is going to happen, the client says ok this looks strange but you know these margins are getting too close together please could you just adjust them a little bit instead of 1 and 8, 2 and so forth what is going to happen essentially you are going to have to redo each and every the calculation that we just did simple like that we have about 5 articles this CSS is not very robust, it is very critical to frame even with a small change you need to read a lot of stuff just to make a minor adjustment So, what is the solution the solution is to use something like SAS because SAS is basically CSS with a few features added so you have nesting, you have variables you have calculations so instead of doing the calculations manually you can ask SAS to do it ok, so I am going to show you how to do that and we are going to be using a very simple grid system called SUSE so there are other shapes of frameworks difference is this one, SUSE does not tell you that you have this many columns or do this or it doesn't ask you to change your model you can create any grid that you want you can create as many columns so basically this is very flexible but it gives you the advantage of this framework and you don't have to do a lot of custom work let's see how that works basically if you are using SAS I will give you a link to show you how to install it now we are just being guided to what at the top of your SAS site you say import SUSE and then you just give it a few variables we are telling it our grid has 12 columns each column is 5 columns and then each margin between the columns is 1M and the page margin is 1M so you just give it this calculation and it takes care of the rest of it and here is the same markup that we had see when you are using SUSE you don't have to rewrite your markup you can use whatever markup you had okay it doesn't enforce this is the way you have to add these classes make this column 4 columns so don't need to do any of that just use the same markup that we had so just say include container and SUSE will include the information saying give it a max width of 100% so it fits within the page all of that is taken care of next the links here you have a mix and called include columns so if you want it to span 2 columns so you just say include columns and here is a feature that is very useful in SAS basically you can nest you can nest elements inside other elements you can also nest media queries inside other elements so rather than having the media queries in a separate location nested below that media square max width 800, include columns 4 max width 600, include columns 6 and it takes care of the rest all the calculations are taken care of basically the same code for the articles for the initial you have the articles spanning 4 columns for the tablet you have columns 6 columns and for the mobile layout it spans the entire term so basically you have around 50 lines of SAS to create this responsive design if you just take a few minutes so you don't have to sit and take out a calculator and figure out what is the percentage that you need to do and after you have done the layout if you want each column to be wider you can just go and change that you want to increase the margins just go and change that and your entire layout will be updated you don't have to sit for 1 hour and change all the calculations and since you are not doing all the calculations there are much less chances that you will have an error but this is a very simple layout but so to say it is capable of a lot more there are a lot more features in this here is a little bit more complex layout you have a header at the site you have a div with a title there and something nested inside it you have another box inside that is nested another box there is a nested box here inside this is another nested box so you can have multiple layers nested this is the proposal page for meta-ruple so let's say it is showing this this is a container so it says include full so this entire thing include full is basically the same as saying include all 12 columns and then the h1 is inside that now this proposal is not the full page it cuts off the margins so the calculations are changed inside so you need to specify that this h1 spans 2 columns out of a total of 12 to make sure that you get the calculations right and the description this telling it to include 10 of 12 columns and include this omega what does this line do basically as you have different columns it automatically adds a margin at the right side but this last column should not have a margin at the right side because this is flush to the corner right because if you had a margin it would float down so this Susie tells the browser that don't add a margin for the last one the text itself just tells it that this should be at the right bottom this is the h2 now this is inside this column which is 10 columns wide the text itself is only in one column and then you have padding of one column so then you have you have this do the same thing include one column out of 10 and then you have a prefix which basically adds padding as many columns as you need it to add this is for the box which is inside this you are telling it include 8 out of 10 columns and include omega since it is at the right side inside that we have these dips you are saying include columns 4 out of 10 so each time if you add the context as long as you add the context you can as long as you add the context you can have as many you can nest it as many times as you want to and here inside so you are telling every second element should be at the very right corner so that's just plain CSS and you can create crazy layouts as you can have each column can be whether one column 4 or 3 or 4 as many columns wide as you want you can add prefixes to have it more left or right and you can create crazy layouts which is a box inside a box inside a box inside a box inside a box inside a box inside a box okay so basically the point is that the rules that you use should not you should not be spending a lot of time reading your tools should be as a designer your job or your office design stuff so let us focus on that and let the computer and the tools that we have take care of all the legal labor so basically this allows you to create any layout that you want this doesn't limit you to any specific you create what layout you want and Susie will allow you to do that it doesn't tell you only this is possible okay so basically these are the few of the features Susie is basically just sat places you mix in the stuff added you can take a look at that see how you want to do it finally you have a responsive design and a responsive design will work across all model models but this will add to that you still have to use the IE7 and IE8 you don't have an option so to do that instead of rewriting all the CSS and what pro is how to set that just add this one file responder it's a very small jobs in a file if you add this in responsive design will work in IE just one second or modernizer modernizer 2.0 already includes this so if you are using that you don't need to use this if you are doing in the proper way and you are designing for the mobile first then immediately so if you don't use respond.js you will basically be giving the mobile layout to IE7 and IE8 if you want to take revenge on IE7 and IE8 don't use respond.js tell your users you want a nice height shift to chroma color okay less and sass are basically pre-processed for CSS they just add additional features so sass is just another way of doing it I like sass because it has SCSS function where you use the syntax SCSS but it allows you to add additional features so you don't have to change any CSS that you write it is already compared to sass so you don't have to rewrite all of that unless the things that you already know you just slowly add the features that you won't be using yeah? okay browser pre-processed if you are using sass then you have a feature called compass okay so the question is what about browser pre-processed so along with sass there are a bunch of mix-ins called which are basically compared to in that using that let's say you want to add a border radius so you say in that just include the CSS3 import that and include the border radius both mix-ins and it will add the regular border radius so basically add all the different versions for you so if you want to use CSS3 features without having to write 5 different times for a single border radius many other features use sass and compass any other questions? you may start yeah? yeah but then the question is we are going it as a responsiveness and so it has to fit it has to be in percentages no i am not talking about the responsiveness so if you see the view which sass does which is normally in CSS3 see if you are using inks of input full you can just finally type in the percentage which sass does what that way of see the thing is this is CSS so you can override you can have this in that and in a mediator you can override that if you wanted to the point is that in a mobile device it won't come out this basically works if the grid is there so you can say that if you don't want to have page borders just assign that a bit 0 and it locked in now if i say include does it include those tags here it only includes include full, include just the mix-in import full so when i pick up the CSS which we are going to have one and two thousand which talks about the same thing no include full will basically say make it a bit of as far as sass is concerned you want to look sass is that you don't have to manually do the calculations so if you have a margin of 1.3 and 1.3 percent you don't want to have to type in 97.4 percent what i have matched that's what i understood can be used in the CSS in the visual studio not that but in the CSS in the CSS see the question is will sass work with the visual studio i have asked it in the idea before the practice